Layout change after screen resize CSS
<p>I have various errors with my design.</p>

<p><strong>First of all</strong>, <a href="http://ramroweb.com/mnml/" rel="nofollow noreferrer">here</a> is the link to the example site that I have been doing to learn HTML and CSS.</p>

<p><a href="http://ramroweb.com/mnml/style.css" rel="nofollow noreferrer">http://ramroweb.com/mnml/style.css</a></p>

<p><li>When the screen size is resized all the items from container moves to the right. Even though I used <code>margin: 0 auto;</code></li>
<li>The whole content is within the <code>div id="container"</code> but still it selects upto the <code>section tag</code> excluding <code>footer tag</code>.</li>
<li>The background image does not fit the whole size creating some <code>padding</code> on the <code>top</code>.

It would be great if I get help with these queries.</p>

<p>Thank you...</p>