[FIXED] How to split my list into two sections on navigation bar?

Issue

I'm trying to split my navigation bar into two (with one part going left and the other right). When trying to get the items I want on the left side, I'm left with a small gap between the items and the wall. Where as, the right side hits the wall of the green and meshes.

**Kinda new to this posting thing so if you need more information on the code please be sure to respond*

Here is the JSFiddle: https://jsfiddle.net/2dkhrjg8/2/

Here is the HTML:

<div id="navbar">
  <div class="table">
    <ul>
      <a class="" href=""><li class="main-nav">Home</li></a>
      <a href=""><li class="main-nav">about</li></a>
      <a target="_blank" href=""><li class="main-nav">where</li></a>
      <a href=""><li class="main-nav">team</li></a>
      <a href=""><li class="main-nav">Help</li></a>
      <li id="right-side" class="sign-in">Sign In</li>
      <li id="right-side" class="sign-up">Sign Up!</li>


    </ul>
  </div>

</div>

Here is the CSS:

#navbar{
  position: relative;
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  background-color: green;
  }
.table{
  display: table;
  margin: 0 auto;
  width: 60%;
  overflow: auto;
  height: 20px;
  background-color: red;
  }
#navbar li{
  display: inline
  }
.main-nav{
  float:left;
  }
 #right-side{
  float: right;
  vertical-align: middle;
  }

Solution

Okay. The thing is that your HTML it's not semantically correct.

I would suggest using flexbox since it is super easy to do it.

Check the modified HTML and if I understood, this is what you want to achieve.

Wish you happy styling and if need any more help just right

.navbar {
  display: flex;
  justify-content: space-between;
}


.main-nav:hover{
 
  background-color: #eff0f1;

}

<div id="navbar">

        <ul class='navbar'>
          <li class="left-side">
            <a class="" href="#">Home</a>
            <a href="www.fdfd.com">About</a>
            <a target="_blank" href="#">Where</a>
            <a href="#">Team</a>
            <a href="#">Help</a>
            <input id="nav-search-bar" type="text" placeholder="Search..." />
          </li>
          <li class="right-side">
            <a href="#" class="sign-in">Sign In</a>
            <a href="#" class="sign-up">Sign Up!</a>
          </li>
      
        </ul>
      </div>

Answered By - Nicholas

Answer Checked By - Gilberto Lyons (PHPFixing Admin)