how to make navigation buttons next to each other horizontally - html

Question

I'm trying to get my navigation buttons to be next to each other, like in this example: https://codepen.io/freeCodeCamp/pen/RKRbwL
Here is my code:
<header id="header">
<img id="header-img" src="https://www.logobee.com/uploads/tesla-logo.png"/>
<nav id="nav-bar">
<ul>
<li>
<a class="nav-link" href="#Features">Features</a>
</li>
<li>
<a class="nav-link" href="#Demo">Demo</a>
</li>
<li>
<a class="nav-link" href="#Pricing">Pricing</a>
</li>
</ul>
</nav>
</header>
<section id="Features">
<h3>EXOSKELETON</h3>
<p>Cybertruck is built with an exterior shell made for ultimate durability and passenger protection. Starting with a nearly impenetrable exoskeleton, every component is designed for superior strength and endurance, from Ultra-Hard 30X Cold-Rolled stainless-steel structural skin to Tesla armor glass.</p>
<h3>ULTRA-HARD 30X COLD-ROLLED STAINLESS STEEL</h3>
<p>If there was something better, we’d use it. Help eliminate dents, damage and long-term corrosion with a smooth monochrome exoskeleton that puts the shell on the outside of the car and provides you and your passengers maximum protection.</p>
<h3>TESLA ARMOR GLASS</h3>
<p>Ultra-strong glass and polymer-layered composite can absorb and redirect impact force for improved performance and damage tolerance.</p>
</section>
<section id="Demo">
<iframe id="video" src="https://www.youtube.com/embed/m7atGkba-Z8" allowfullscreen></iframe>
</section>
<section id="Pricing">
<h3>Single-Motor Cybertruck</h3>
<ul>
<li>$39,900</li>
<li>250+ miles of range</li>
<li>0-60 moh in 6.5 seconds</li>
<li>top speed of 110 mph</li>
</ul>
<h3>Dual-Motor Cybertruck</h3>
<ul>
<li>$49,900</li>
<li>300+ miles of range</li>
<li>0-60 moh in 4.5 seconds</li>
<li>top speed of 120 mph</li>
</ul>
<h3>Tri-Motor Cybertruck</h3>
<ul>
<li>$69,900</li>
<li>500+ miles of range</li>
<li>0-60 moh in 2.9 seconds</li>
<li>top speed of 130 mph</li>
</ul>
</section>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" placeholder="Enter your email" type="email" name="email"></input>
<input id="submit" type="submit"></input>
</form>
CSS:
header {
position: fixed;
left: 480px;
top: 0px;
}
#media (max-width: 800px){
position: fixed;
left: 200px;
}
#header-img {
height: 80px;
}
header {
display: flex;
}
li {
display: flex;
}
How do I do this? thank you!
also, I copy and paste my code from codepen into stack overflow but I have to manually space out my code so it is formatted correctly. How do I make it so I can just copy and paste code and have it automatically formatted? I used the code toolbar but it only makes the first line of code formatted.

Answer 1

If you want the nav items to be placed horizontally, you should apply display: flex property to the parent container, i.e, ul in your case.
nav ul {
display: flex;
}
My bad, there should be a space between nav and ul. I've updated my answer. Now it will target only the nav elements