CSS: All of my items are top of each other, how can I fix it?

September 25, 2023

it is urgent. i need your help. please help me.

I have tried to fit all of my thing in one line but i could not. How can I fit all of my things in one line in my nav-bar? What should I add to my css code or how can I fix this problem. But now all of them is top of each other

          [Codepen]     (https://codepen.io/burhanelaldi/pen/GRPxxRx)

I tried to create a nav-bar

>Solution :

Not sure entirely what you are asking but if you are looking to make your flow horizontally, then simply adding display: flex as below.

ul {
  display: flex;
}

P.S. You do not need to add html, body, head tags etc to code pen it should simply be the content of the body tag.
P.P.S. You need to terminate the tag too.

<!--  I define the <nav> tag in the <body> tag where i want to make the bar -->
<nav> 
  <ul> <!-- I define the <ul> tag, which is used to show the unordered list. And, then i define the list items in the <li> tag. I define those items which i want to show in the navigation bar. They are gonna go to href -->
    <li><a href="#home">Home</a></li>
    <li><a href="#history">History</a></li>
    <li><a href="#strategies">Strategies</a></li>
    <li><a href="#myGame">My Game</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>
<!--  I gave each anchor tag a corresponding div. When we click on the nav bar we are gonna go to those ids -->
<div id="home">Home</div>
<div id="history">History</div>
<div id="strategies">Strategies</div>
<div id="myGame">My Game</div>
<div id="contact">Contact</div>