title: Can't get navigation bar to display horizontally
body: <p>I'm trying to get my navigation bar to display horizontally, but I'm not able to.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div class="theheader"&gt;
          &lt;h1&gt;&lt;a href="#"&gt;My Name&lt;/a&gt;&lt;/h1&gt;
          &lt;ul id="nav"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul id="subscribe"&gt;
              &lt;li class="facebook"&gt;&lt;a href="#"&gt;Follow on Facebook&lt;/a&gt;&lt;/li&gt;
              &lt;li class="rss"&gt;&lt;a href="#"&gt;Subscribe by RSS&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#theheader {
      width: 961px; margin: 0 auto; position: relative;
      overflow: hidden;
  }
      #theheader h1 a {
          position: absolute; top: 5px; left: 376px;display: block; width: 208px; height: 213px; 
          background: url(Images/Welcome.png); text-indent: -9999px;
      }
          #theheader h1 a:hover {
              background-position: bottom;
          }
  
      #theheader ul#nav {
          float: left; margin: 22px 0 0 24px; list-style: none;
      }
          #theheader ul#nav li {
              float: left; margin: 0 0 0 45px;
          }
              #theheader ul#nav li:first-child {
                  margin: 0;
              }
                  #theheader ul#nav li a {
                      display: block; font: 13px Georgia, Serif; letter-spacing: 2px; color: #eeede6;
                      text-decoration: none;
                  }
                      #theheader ul#nav li a:hover {
                          color: #d0cfc8;
                      }
  
      #theheader ul#subscribe {
          float: right; margin: 22px 24px 0 0; list-style: none;
      }
          #theheader ul#subscribe li {
              float: left; margin: 0 0 0 32px;
          }
              #theheader ul#subscribe li a {
                  display: block; height: 16px; font: 13px Georgia, Serif; letter-spacing: 2px; color: #eeede6;
                  text-decoration: none; padding: 1px 0 0 27px;
                  background: url(images/icons.png) left 1px no-repeat;
              }
                  #theheader ul#subscribe li.rss a {
                      background-position: left -16px;
                  }
                      #theheader ul#subscribe li a:hover {
                          color: #d0cfc8;
                      }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/5AVA8/85/" rel="nofollow">http://jsfiddle.net/5AVA8/85/</a></p>
  
  <p>I wanted the navigation bar to look something like this:</p>
  
  <p><a href="http://line25.com/wp-content/uploads/2010/blog-design-coded/demo/index.html#" rel="nofollow">http://line25.com/wp-content/uploads/2010/blog-design-coded/demo/index.html#</a></p>