title: Horizontal list inline styling works but css referencing does not
body: <p>Trying to make a horizontal list via the use of a CSS document. When I use inline sttyling the list displays as wanted but when I use CSS selectors, it doesn't. My CSS isn't being overwritten as I've also tested in JSBin. </p>
  
  <pre><code>#footer-list li {
    display: inline;
  }
  
    &lt;ul class="footer-list"&gt;
                  &lt;li&gt;&lt;a href=""&gt;1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;4&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
    &lt;ul&gt;
                  &lt;li style="display:inline;"&gt;&lt;a href=""&gt;1&lt;/a&gt;&lt;/li&gt;
                  &lt;li style="display:inline;"&gt;&lt;a href=""&gt;2&lt;/a&gt;&lt;/li&gt;
                  &lt;li style="display:inline;"&gt;&lt;a href=""&gt;3&lt;/a&gt;&lt;/li&gt;
                  &lt;li style="display:inline;"&gt;&lt;a href=""&gt;4&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  </code></pre>