Horizontal UL using CSS Grid - html

Question

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.
Any ideas?
I have eliminated all my testing in the css, so currently there is no reference to the ul
HTML
#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;
}
<header>
<nav id="nav-bar">
<div class="image">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="logo"><!--U.S.2-->
</div>
<div class="links">
<ul>
<li><a class="nav-link" href="#features">Features</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#video">Video</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#pricing">Pricing</a></li><!--U.S.4, 5-->
</ul>
</div>
</nav>
</header>

Answer 1

You should add the code the the list elements (li). Adding inline display to list (ul) will not change much.
Your problem has basically nothing do do with CSS Grid, since you're not using grid directly on the list.
Also there are many ways to do it, using display: inline, display: inline-block, using flexbox or even grid.
Solution using display: inline or display: inline-block
#nav-bar {
display: grid;
grid-template-columns: 50% 50%;
background-color: #eee;
padding: 10px;
border-radius: 10px;
}
#header-img {
object-fit: cover;
width: 70%;
max-height: 100%;
float: left;
}
ul li {
display: inline;
}
<header>
<nav id="nav-bar">
<div class="image">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="logo"><!--U.S.2-->
</div>
<div class="links">
<ul>
<li><a class="nav-link" href="#features">Features</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#video">Video</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#pricing">Pricing</a></li><!--U.S.4, 5-->
</ul>
</div>
</nav>
</header>
Solution using display: flex
#nav-bar {
display: grid;
grid-template-columns: 50% 50%;
background-color: #eee;
padding: 10px;
border-radius: 10px;
}
#header-img {
object-fit: cover;
width: 70%;
max-height: 100%;
float: left;
}
ul {
display: flex;
}
<header>
<nav id="nav-bar">
<div class="image">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="logo"><!--U.S.2-->
</div>
<div class="links">
<ul>
<li><a class="nav-link" href="#features">Features</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#video">Video</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#pricing">Pricing</a></li><!--U.S.4, 5-->
</ul>
</div>
</nav>
</header>
Solution using display: grid
(One way of doing it)
#nav-bar {
display: grid;
grid-template-columns: 50% 50%;
background-color: #eee;
padding: 10px;
border-radius: 10px;
}
#header-img {
object-fit: cover;
width: 70%;
max-height: 100%;
float: left;
}
ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
<header>
<nav id="nav-bar">
<div class="image">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="logo"><!--U.S.2-->
</div>
<div class="links">
<ul>
<li><a class="nav-link" href="#features">Features</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#video">Video</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#pricing">Pricing</a></li><!--U.S.4, 5-->
</ul>
</div>
</nav>
</header>

Answer 2

to get the <li> elements in the <ul> appear horizontally, you can simply add the following to the CSS, making <li> elements to display:inline-block or display:inline:
li{
display: inline-block;
}