title: CSS list-horizontal
body: <p>So I'm trying to copy this website template: <a href="https://freewebsitetemplates.com/preview/rehabilitation-yoga/index.html" rel="nofollow noreferrer">link</a></p>
  
  <p>I want to make the list items horizontal like in the link above, But it just doesnt work with <code>display:inline block</code> which is what I've seen from google and this forum, I also tried to use <code>float.</code>I have tried to search several ways including using a <code>table</code> but it doesn't work either.This is probably a stupid mistake Im overlooking but I can't seem to find a solution.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;link rel="stylesheet" href="test.css" /&gt;
    &lt;title&gt;title&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="header"&gt;
      &lt;a href="https://freewebsitetemplates.com/preview/rehabilitation-yoga/index.html"&gt;
        &lt;h1&gt;Belle &amp; Carrie&lt;/h1&gt;
      &lt;/a&gt;
      &lt;span&gt;rehabilitation yoga
      &lt;/span&gt;
    &lt;/div&gt;
  
    &lt;ul class="listHorizontal"&gt;
      &lt;li&gt;Home&lt;/li&gt;
      &lt;li&gt;About&lt;/li&gt;
      &lt;li&gt;Contact Us&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
    &lt;/ul&gt;
  
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
    background: #077054;
    color: #315f52;
  }
  
  .header {
    text-align: center;
  }
  .header a {
    text-decoration: none;
    color: #99fa99;
    font-size: 20px;
    font-weight:normal;
    font-family: "latoregular";
  }
  .header span {
    color: #b6d8cf;
    font-size: 26px;
    text-transform: uppercase;
    font-family: 'nixie_oneregular';
  
  }
  
  .listHorizontal {
  
   color: #b6d8cf;
    font-size:30px;
    text-transform: uppercase;
    list-style: none;
    display:inline-block;
  
  
  }
  </code></pre>