title: CSS: How to make background of an element stretch across the entire page?
body: <p>I'm starting to learn CSS and really don't know how to deal with this problem. I am trying to make a solid colored top bar similiar to the black bar on bottom of this page. However when I try to do it, the color sort of makes a box around the text, instead of going from the borders of the page. I tried playing around with width/height with no success. </p>
  
  <p>Thanks</p>
  
  <p>EDIT:</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code> body { margin:0;}
  .
  .
  .
  #bar{
        height: 100%; //these dont do anything
        width: 100%;
     background-color:black;}
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id=bar&gt;       &lt;h1&gt; &lt;a href="index.html"&gt; &lt;span id=stuff&gt;stuff &lt;/span&gt;&lt;/a&gt;
         &lt;br&gt; &lt;span id=stuff&gt; stuff stuff stuff&lt;/span&gt; &lt;/h1&gt; 
  
         &lt;ul&gt;
  &lt;li&gt;&lt;a href="#stuff"&gt;stuff stuff stuff&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#stuff"&gt;stuff stuff stuff&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#stuff"&gt;stuff stuff stuff&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#stuff"&gt;stuff stuff stuff&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#stuff"&gt;stuff stuff stuff&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#stuff"&gt;stuff stuff stuff&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>