title: Horizontal UL using CSS Grid
body: <p>Trying to get my UL to be horizontal, while also using CSS Grid. I basically have two columns than span the whole page and in the second one (on the right) I want to have my UL appear horizontally. I have tried both display: block and inline and neither seem to be having the desired effect.</p>
  <p>Any ideas?
  I have eliminated all my testing in the css, so currently there is no reference to the <code>ul</code>
  HTML</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#nav-bar {
    display: grid;
    grid-template-columns: 50% 50%;
    background-color: #3e2723;
    padding: 10px;
    border-radius: 10px;
  }
  
  #header-img {
    object-fit: cover;
    width: 70%;
    max-height: 100%;
    float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
    &lt;nav id="nav-bar"&gt;
      &lt;div class="image"&gt;
        &lt;img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="logo"&gt;&lt;!--U.S.2--&gt;
      &lt;/div&gt;
      &lt;div class="links"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a class="nav-link" href="#features"&gt;Features&lt;/a&gt;&lt;/li&gt;&lt;!--U.S.4, 5--&gt;
          &lt;li&gt;&lt;a class="nav-link" href="#video"&gt;Video&lt;/a&gt;&lt;/li&gt;&lt;!--U.S.4, 5--&gt;
          &lt;li&gt;&lt;a class="nav-link" href="#pricing"&gt;Pricing&lt;/a&gt;&lt;/li&gt;&lt;!--U.S.4, 5--&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>