仿Apple官网导航栏过宽问题求助（附CSS/HTML代码）

我正在通过YouTube视频复刻Apple官网以学习CSS和HTML，目前遇到导航栏样式问题：导航栏宽度过宽，无法达到图标紧凑居中的期望效果（参考Apple官网导航栏），当前实现中导航栏直接撑满侧边长度。我的代码与视频17:30处讲解导航样式的代码一致，具体代码如下：

我的代码 #

CSS #

*,
*::before,
*::after{
    margin: 0;
    padding: 0;
}

html{
    font-size: 10px;
    font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif
}

a{
    display: block;
    text-decoration: none;
}

.container{
    max-width: 98rem;
    margin: 0 auto;
    padding: 0 2.2rem;
}

header{
    position: fixed;
    top: 0;
    z-index: 1400;
    width: 100%;
    height: 4.4rem;
    background-color: rgba(0,0,0,.8);
    backdrop-filter: blur(2rem);
    
}

.nav-list{
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -1rem;
}

HTML #

<header>
        <div class="cointainer">
            <nav class="nav">
                <ul class="nav-list nav-list-mobile">
                    <li class="nav-item">
                        <div class="mobile-menu">
                            <span class="line line-top"></span>
                            <span class="line line-botton"></span>
                            
                        </div>
                    </li>
                    <li class="nav-item">
                        <a href="index.html" class="nav-link nav-link-apple"></a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link nav-link-bag"></a>
                    </li>
                </ul>
                <!-- /.nav-list nav-list-mobile -->
                <ul class="nav-list nav-list-larger">

                    <li class="nav-item nav-item-hidden">
                        <a href="index.html" class="nav-link nav-link-apple"></a>
                    </li>                    
                    <li class="nav-item">
                        <a href="#" class="nav-link">Mac</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">iPad</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">iPhone</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Watch</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">TV</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Music</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Sport</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Support</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link nav-link-search"></a>
                    </li>
                    <li class="nav-item nav-item-hidden">
                        <a href="#" class="nav-link nav-link-bag"></a>
                    </li>
                </ul>
                <!-- /.nav-list nav-list-larger -->
            </nav>
        </div>
    </header>

问题排查与修复方案 #

1. 核心问题：容器类名拼写错误 #

你的HTML中将container误写为cointainer，导致header内的容器无法应用CSS中定义的max-width: 98rem和居中样式，导航栏直接继承了header的width: 100%，从而撑满整个屏幕宽度。

2. 导航列表对齐方式调整 #

当前.nav-list使用justify-content: space-between会让元素分散撑满容器，改为justify-content: center并通过gap控制间距，即可实现图标紧凑居中的效果。

修复后的代码调整 #

修正HTML中的容器类名

<header>
    <!-- 把cointainer改为container -->
    <div class="container">
        <nav class="nav">
            <!-- 其余代码保持不变 -->
        </nav>
    </div>
</header>

调整CSS的导航列表样式

.nav-list{
    list-style: none;
    display: flex;
    align-items: center;
    /* 替换space-between为center，添加gap控制项间距 */
    justify-content: center;
    gap: 3rem;
    margin: 0; /* 移除负margin避免多余的左右间距 */
}

补充说明 #

• 容器类名修正后，导航栏会被限制在max-width:98rem的范围内，不会再撑满屏幕宽度。
• 使用gap可以精确控制导航项之间的距离，若需要适配不同屏幕尺寸，可配合媒体查询设置不同的gap值，进一步贴近Apple官网的响应式效果。

内容的提问来源于stack exchange，提问作者wojtek