html - 我的标题有 768px 作为我的菜单，但我的菜单看起来更小？

Question

我对我遇到的一个问题很生气，我真的无法理解正在发生的事情。

我有一个 768px 的 #topo 部分。

然后我有一个 768px 的菜单 div。

Logo 是我图片中的黄色 div，菜单是我图片中的灰色 div。

你能理解为什么他们有相同的，但是在我的页面中，正如你在我的图像中看到的，他们有不同的然后我的页面出现滚动条向右走？？？？

我有这个 jsffidle:

http://jsfiddle.net/ra3zc/10/

(但在 jsfiddle 中正好相反，我的菜单看起来比我的 div“topo”小)

我的 html:

<header id="topo">
    <span id="logo">
        <a href="index.php" style="margin-left:350px;">LOGO</a>
    </span>
</header>

<section id="menu-container">
    <nav id="menu">
        <ul>    
            <li><a href="#">Link 1</a>
                <ul>
                    <li style="border-top:none;"><a href="#">Link 1.1</a></li>
                    <li><a href="#">Link 1.2</a></li>
                </ul>
            </li> 
            <li><a href="#">Link 2</a>
                <ul>
                    <li style="border-top:none;"><a href="#">Link 2.1</a></li>
                    <li><a href="#">Link 2.2</a></li>
                </ul>
            </li> 
            <li><a href="#">Link 3</a>
                <ul>
                    <li style="border-top:none;"><a href="#">Link 3.1</a></li>
                    <li><a href="#">Link 3.2</a></li>
                </ul>
            </li> 
        </ul>
    </nav>  
</section>

Answer 1

Demo

正如King King所说，也将margin-top:0;添加到#menu ul以获得想要的结果。

#menu {
  background:gray;
}

#menu ul {
  margin-top:0;
}

#menu-container {
  background:gray /* remove this from #menu-container */
}

对于您的其他问题

Demo

添加 max-width: 768px 和 width:100%;