how do i add a side bar and center page with out them merging with the nav bar <p>I have tried adding a center page and side bars to my site but the only problem is the div tags merge and the backround color of the nav bar takes over the side bars even if the style code is separated heres an example </p> <pre><code>&lt;!DOCTYPE html&gt; &lt;style&gt; body {margin:0;} ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; border: solid; background-color: #000000; width: 100%; display:inline-block; } li { float: left; } .dropbtn { background-color: #0E8E0A; color: white; padding: 19px; font-size: 16px; border: none; overflow:hidden; cursor: pointer; } .dropbtnR { background-color: #15428A; color: white; padding: 19px; font-size: 16px; border: none; overflow:hidden; cursor: pointer; } .dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 100px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } span { } &lt;/style&gt; &lt;!-- saved from url=(0039)http://www.theamannetwork.net/beta.html --&gt; &lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;style&gt; .float-left-area { width: 70%; float: left; } .float-right-area { width: 30%; float: left; } .inner-left { padding: 5px 5px 5px 5px; margin-right: 10px; border: #999999 1px solid; min-height: 60px; } .inner-right { font-size: 11px; padding: 5px 5px 5px 5px; border: #999999 1px solid; min-height: 60px; } .clear-floated { clear: both; height: 1px; font-size: 1px; line-height: 1px; padding: 0; margin: 0; } &lt;/style&gt; &lt; &lt;/head&gt; &lt;body&gt; &lt;ul&gt; &lt;br&gt; &lt;div class="dropdown" style="float:left;"&gt; &lt;button class="dropbtn"&gt;≡&lt;/button&gt; &lt;div class="dropdown-content" style="left:0;"&gt; &lt;a href="http://www.theamannetwork.net/beta.html#"&gt;the &lt;/a&gt; &lt;a href="http://www.theamannetwork.net/beta.html#"&gt;cake &lt;/a&gt; &lt;a href="http://www.theamannetwork.net/beta.html#"&gt;is a lie&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/br&gt; &lt;div class="dropdown-content"&gt; &lt;a href="http://www.theamannetwork.net/beta.html#"&gt;&lt;img src="./beta_files/Twitter.png"&gt; &lt;/a&gt; &lt;a href="http://www.theamannetwork.net/beta.html#"&gt;random link &lt;/a&gt; &lt;a href="http://www.theamannetwork.net/beta.html#"&gt;SOMTHING IDK &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;center&gt;&lt;a class="navbar-brand" href="http://www.theamannetwork.net/beta.html#"&gt;&lt;img src="./beta_files/banner.png" alt=""&gt;&lt;/a&gt;&lt;/center&gt; &lt;div class="float-left-area"&gt; &lt;div class="inner-left"&gt; some random content &lt;/div&gt; &lt;/div&gt; &lt;div class="float-right-area"&gt; &lt;div class="inner-right"&gt; some random content &lt;/div&gt; &lt;/div&gt; &lt;div class="clear-floated"&gt;&lt;/div&gt; &lt;/ul&gt;&lt;/body&gt;&lt;/html&gt; </code></pre> <p>how do I go about adding a center page and side bars with out merging</p>