How to optimize this css code? <p>I am a css newbie. I just draw a basic HTML page with following code:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Hey&lt;/title&gt; &lt;link href="style.css" rel="stylesheet" type="text/css"&gt; &lt;/head&gt; &lt;body&gt; &lt;header class="top-menu"&gt;&lt;/header&gt; &lt;div class="container"&gt; &lt;div class="left-side"&gt;&lt;/div&gt; &lt;div class="main-content"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="foot"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Here is style.css:</p> <pre><code>.top-menu{ position: fixed; top: 0; left: 70px; right: 70px; height: 50px; background-color: #000000; } .container{ margin: 70px 70px 20px 70px; display: inline-block; width: 91%; } .left-side { width: 30ex; min-height: 30ex; float: left; background-color: blue; } .main-content { width: 80ex; float: right; background-color: red; min-height: 100ex; } .foot { background-color: green; height: 5ex; width: 91%; margin-left: 10ex; } </code></pre> <p>The purpose is straightforward.But the css looks crap.even some problems.I want to ask some questions:</p> <p>1.The left and right margin of container is 70px, and the same to top-menu, but from chrome page view,why does it not aligned?</p> <p>2.Why does it appear horizontal scroll bar when I set 'container''s width to 100 percent (same as foot part)?</p> <p>3.If I don't set container's display to 'inline-block', why does the foot part flying to the air? (even I set it to 'block')</p> <p>4.Could you guys give me a better css style code?</p>