I'm feeling frustrated with an issue that I can't seem to figure out.
The #topo section is supposed to have a width of 768px.
Similarly, the menu div should also have a width of 768px.
In my page, however, the logo (yellow div) and the menu (gray div) appear to have different widths, causing a scroll bar to appear on the page for horizontal navigation. Can you help me understand why this is happening?
Here's the jsfiddle link:
(In the jsfiddle example, the menu appears smaller than the "topo" div)
Here is my HTML code:
<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>