title: footer width li inline-block
body: <p>Hello I am making a footer:</p>
  
  <pre><code>&lt;div id="footer"&gt;
  
      &lt;ul&gt;
  
          &lt;li id="qualifications"&gt;
  
              &lt;h4&gt;Professional qualifications&lt;/h4&gt;
  
              &lt;p&gt;Name&lt;br&gt;
                 Chartered Veterinary Physiotherapist&lt;br&gt;
                 Chartered Physiotherapist&lt;br&gt;
                 BSc HONS MCSP&lt;br&gt;
                 Post Grad Dip (vet phys) ACPAT CAT A
              &lt;/p&gt;
  
          &lt;/li&gt;
  
          &lt;li id="logos"&gt;
  
              &lt;h4&gt;head
              &lt;/h4&gt;
  
              &lt;img src="/" /&gt;
  
          &lt;/li&gt;
  
          &lt;li id="contact"&gt;
  
              &lt;h4&gt;Contact and referal&lt;/h4&gt;
  
              &lt;p&gt;Contact&lt;/p&gt;
  
              &lt;p&gt;&lt;a id="referal"&gt;Referal Form&lt;/a&gt;&lt;/p&gt;
  
          &lt;/li&gt;
  
       &lt;/ul&gt;
  
  &lt;/div&gt; &lt;!---footer----&gt;
  </code></pre>
  
  <p>I want the footer div to be 100% width so I can colour it. I want the ul to be 960px wide and the li elements to lign up next to on another in a inline-block. css:</p>
  
  <pre><code>#footer {
  background-color:#666666;
  
  
  #footer ul  {
      width:960px;
      margin-left: auto ;
      margin-right: auto ;
  
  
  }
  
  #footer li {
      width: 320px;
      display:inline-block;
  }
  </code></pre>
  
  <p>But the li elements knock the last one underneath the first two and ther's odd spacing at the top.</p>
  
  <p>Any help would be great!</p>