title: Horizontal list items
body: <p>So, I have attempted to create a horizontal list for use on a new website I am designing. I have attempted a number of the suggestions found online already such as setting 'float' to left and such - yet none of these have worked when it comes to fixing the problem.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    ul#menuItems {
        background: none;
        height: 50px;
        width: 100px;
        margin: 0;
        padding: 0;
      }
      ul#menuItems li {
        display: inline;
        list-style: none;
        margin-left: auto;
        margin-right: auto;
        top: 0px;
        height: 50px;
      }
      ul#menuItems li a {
        font-family: Arial, Helvetica, sans-serif;
        text-decoration: none;
        font-weight: bolder;
        color: #000;
        height: 50px;
        width: auto;
        display: block;
        text-align: center;
        line-height: 50px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="menuItems"&gt;
    &lt;li&gt;
      &lt;a href="index.php"&gt;Home&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="index.php"&gt;DJ Profiles&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Currently I am unsure of what is causing this issue, how would I go about and resolve it?</p>