How to set up a nav bar?-CodePudding

I am trying to build a heading/nav bar and want to know the best way to build it. I feel like I wrote too much code and made it way more complicated than should be. I wasn't too sure how to change the space between the heading and menu. When I resize the window the menu text gets messed up. Any help would be appreciated!

body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#navbar {
  width: 100%;
  height: 10%;
  position: fixed;
  display: flex;
  align-items: center;
  background-color: #cae7df;
  border-bottom: 1px solid black;
}
#heading {
  font-family: comic sans ms;
  font-size: 1.5rem;
  width: 50%;
  margin-left: 5%;
}
.sections {
  font-family: comic sans ms;
  font-size: 1rem;
}
#menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  margin-right: 5%;
}

<div id="navbar">
            <h1 id="heading">The Arena</h1>
            <div id="menu">
            <h2 >Games</h2>
            <h2 >How Tt Works</h2>
            <h2 >Team</h2>
            </div>

CodePudding user response：

You shouldn't use h2 tags in a navigation

It should be something like this:

.nav{
  float:right;
}
.nav_list{
  list-style:none;
  padding:0;
  margin:0;
}
.nav_item{
  display: inline-block;
}
.nav_item a{
  padding: 5px 15px;
  background: #eee;
  text-decoration: none;
  color: #444;
}
.nav_item a:hover{
  background: #E1ECF4;
  color: blue;
}

<div >
  <ul >
    <li >
      <a href="#">Some Link</a>
    </li>
    <li >
      <a href="#">Some Link</a>
    </li>
    <li >
      <a href="#">Some Link</a>
    </li>
  </ul>
</div>