div does not cover full width <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!DOCTYPE html&gt; &lt;html lang="en-us"&gt; &lt;head&gt; &lt;title&gt;Golden Ratio&lt;/title&gt; &lt;style&gt; html, body { padding: 0; margin: 0; } .wrapper { background-color:#DFE2DB; margin: 0 auto; padding: 10px; width: 1080px; border-radius: 10px; border: 5px solid #fff; box-shadow: 7px 7px 5px #888888; } .banner{ border: 5px solid #558C89; height: 200px; } .content_area{ float:left; width:750px; margin: 20px 0 20px 0; padding: 10px; height:400px; border: 2px solid #D9853B; } .sidebar{ float:right; width:250px; height:400px; margin: 20px 10px; padding: 10px; border: 2px solid #2B2B2B; } footer{ clear:both; width:auto; color:#fff; height:40px; padding:10px; text-shadow:0.1em 0.1em #E9E581; text-align:center; border: 3px solid #fff; } .announcement_section{ height:40px; border: 2px solid #4499cc; } #nav ul ul { display: none; } #nav ul li:hover &gt; ul { display: block; } #nav ul{ background: #efefef; background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); box-shadow: 0px 0px 9px rgba(0,0,0,0.15); padding: 0 20px; border-radius: 10px; list-style: none; position: relative; display: inline-table; } #nav ul:after { content: ""; clear: both; display: ; } #nav ul li { float: left; } #nav ul li:hover { background: #4b545f; background: linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); } #nav ul li:hover a { color: #fff; } #nav ul li a { display: block; padding: 25px 40px; color: #757575; text-decoration: none; } #nav ul ul { background: #5f6975; border-radius: 0px; padding: 0; position: absolute; top: 100%; } #nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; } #nav ul ul li a { padding: 15px 40px; color: #fff; } #nav ul ul li a:hover { background: #6699aa; } #nav ul ul ul { position: absolute; left: 100%; top:0; } &lt;/style&gt; &lt;/head&gt; &lt;body bgcolor="#bbccdd"&gt; &lt;div class="wrapper"&gt; &lt;div class="banner"&gt; &lt;h1&gt;banner here&lt;/h1&gt; &lt;/div&gt; &lt;div id="nav"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Registration&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Registration FAQs&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;How to register&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Register now&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;register1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;register1&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;register2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;register2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="content_area"&gt; &lt;h1&gt;content area&lt;/h1&gt; &lt;/div&gt; &lt;div class="sidebar"&gt; &lt;h1&gt;News here&lt;/h1&gt; &lt;/div&gt; &lt;footer&gt; &lt;p&gt;All rights reserved&lt;/p&gt; &lt;/footer&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> </p> <p>My code as above has one problem: my navigation bar does not extend to cover the full width but everything else works fine. what might be the problem. I have tried width:100% on the nav but seems not work. how do i fix this</p>