I need a simple css code for navigation bar

Question

I just need a simple navigation bar, with CSS.

I used a div so I can organize my code, and I'm stuck to make the right div in the right and the left div in the left.

Please can anyone help me?

<div class="nav">
            <div class="navleft">
                <span>All jobs</span>
                <span><input type="button" value="change jobs" id="btn"></span>
            </div>
            <div class="navright">
                <select>
                    <option>All Time</option>
                    <option>this time</option>
                    <option>everytime</option>
                </select>
            </div> 
        </div>

Answer 1

Quite simply, you can add the following code to your .nav classed <div>

You can then use this styling in your css file

.nav {
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
}

This should give you the desired result. I've also added some padding to the nav so the items aren't stuck to the edges.

If interested on improving your code too, I would suggest changing your HTML to better suit the role of each element you're using. Here is an example of how you could change it

<nav>
  <ul class="navleft">
    <li>All jobs</li>
    <li><input type="button" value="change jobs" id="btn"></li>
  </ul>
  <ul class="navright">
    <select>
      <option>All Time</option>
      <option>this time</option>
      <option>everytime</option>
    </select>
  </ul>
</nav>