title: display: inline or dsplay: inline block not making my list horizontal
body: <p>I'm trying to make a list of 3 items appear horizontal instead of vertical.
  However using display: inline or display: inline block. Hasn't worked.
  I tried float: left but this made the page very messy didn't work and also expanded the footer and header for some reason. This is the page: <a href="http://www.ottawaydental.com/patients/" rel="nofollow">http://www.ottawaydental.com/patients/</a></p>
  
  <p>Here is my CSS:</p>
  
  <pre><code>/*Patients Style*/
  
  
  /*Trying to line up the 3 .pdfs*/   
  
  ul{
      list-style-type: none;
      margin:0;
      padding:0;
  }
  .doc-thumb {
      display:inline block;
      text-align:center;
  }
  div {
      display:inline block;
      width: 960px;
  }
  .docs {
      text-align:center;
      display:inline block;
  }
  </code></pre>
  
  <p>Here is my HTML for the list:</p>
  
  <pre><code>&lt;!--Container!--&gt;
  &lt;div class="docs"&gt;
      &lt;ul&gt;
          &lt;li class="docs"&gt;
              &lt;figure class="doc-thumb"&gt;
                  &lt;a href="http://ottawaydental.com/Documents/Transfer%20Consent Form General.pdf"&gt;
                      &lt;img alt="General Consent Form" src="http://www.ottawaydental.com/wp-content/uploads/2014/07/consentgeneral.png"&gt;
                  &lt;/a&gt;
              &lt;/figure&gt;
              &lt;h4&gt;
                  &lt;a href="http://ottawaydental.com/Documents/Transfer%20Consent Form General.pdf"&gt;General Consent Form&lt;/a&gt;
              &lt;/h4&gt;
              &lt;p&gt;A general consent form for transferring patient records from another dental practice.&lt;/p&gt;
          &lt;/li&gt;
          &lt;li class="docs"&gt;
              &lt;figure class="doc-thumb"&gt;
                  &lt;a href="http://ottawaydental.com/Documents/Transfer%20Consent Form Pickup&amp;Associates.pdf"&gt;
                      &lt;img alt="Pickup &amp; Associates Consent Form" src="http://www.ottawaydental.com/wp-content/uploads/2014/07/consentpickup.png"&gt;
                  &lt;/a&gt;
              &lt;/figure&gt;
              &lt;h4&gt;
                  &lt;a href="http://ottawaydental.com/Documents/Transfer%20Consent Form Pickup&amp;Associates.pdf"&gt;Pickup &amp; Associates Consent Form&lt;/a&gt;
              &lt;/h4&gt;
              &lt;p&gt;A consent form for transferring patient records from Pickup &amp; Associates.&lt;/p&gt;
          &lt;/li&gt;
  
          &lt;li class="docs"&gt;
              &lt;figure class="doc-thumb"&gt;
                  &lt;a href="http://ottawaydental.com/Documents/Medical%20History Form.pdf"&gt;
                      &lt;img alt="Medical History Form" src="http://www.ottawaydental.com/wp-content/uploads  /2014/07/medicalhistorylogo.png"&gt;
                  &lt;/a&gt;
              &lt;/figure&gt;
              &lt;h4&gt;
                  &lt;a href="http://ottawaydental.com/Documents/Medical%20History Form.pdf"&gt;Medical History Form&lt;/a&gt;
              &lt;/h4&gt;
              &lt;p&gt;A form to fill out your medical history prior to your appointment.&lt;/p&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;!--Container end!--&gt;
  </code></pre>
  
  <p>Any tips on how to fix the list would be appreciated. Like I said I have switched between inline and inline block as well as tried float.       </p>