Aligning 3 divs side by side in a navigation bar

Question

I am trying to align 3 divs side by side in a navigation bar. I've spent the past 5 hours trying to figure this out and I know it's something super simple that I can't just wrap my head around.

This is where I am at right now.

If I float the align-right div the tags Join & Support stack ontop of each other.

<div id="sticky-nav">
    <div class="container">
        <div class="box">
            <div class="align-left">
                <a href="javascript:void(0)" class="active">Home</a> <a
                    href="javascript:void(0)">Listings</a>
            </div>
            <div class="align-center">
                <form action="/action_page.php">
                    <input type="text" placeholder="Search..">
                    <button type="submit">
                        <i class="fa fa-search"></i>
                    </button>
                </form>
            </div>
            <div class="align-right">
                <a href="javascript:void(0)">Join</a> <a
                    href="javascript:void(0)">Support</a>
            </div>
        </div>
    </div>
</div>

#sticky-nav {
    overflow: hidden;
    background-color: #7889D6;
    position: fixed;
    top: 0;
    width: 100%;
}

#sticky-nav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
}

#sticky-nav input[type=text] {
    padding: 6px;
    margin-top: 8px;
    font-size: 17px;
    border: none;
    max-width: 300px;
    width: 100%;
}

#sticky-nav button {
    padding: 6px 10px;
    padding-top: 1px; margin-top : 8px;
    margin-right: 16px;
    background: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
    margin-top: 8px;
}

#sticky-nav a:hover {
    background-color: #ddd;
    color: black;
}

#sticky-nav a.active {
    background-color: #4CAF50;
    color: white;
}

.container {
    display: table;
    width: 100%;
}

.box {
    display: table-row;
}

.align-left {
    width: 33%;
    text-align: justify;
    display: table-cell;
    padding: 10px;
}

.align-center {
    width: 33%;
    text-align: justify;
    display: table-cell;
    padding: 10px;
}

.align-right {
    width: 33%;
    display: table-cell;
    padding: 10px;
    text-align: right;
}

EDIT: This is the layout I am trying to achieve,

Answer 1

I see that you're using display: table to achieve this effect. I highly recommend reading up more first before continuing with your work or project. Some layout concepts you have to know are grid and flex. In your case, we can use the flexbox concept to solve your problem.

flex basically is a method that can distribute space between items more easily. In your case, you can get what you're trying to achieve by using flex-grow and flex-basis. flex-basis defines how, initially, long/tall an item inside a flex container should be. flex-grow defines how an item inside a flex container can expand (grow) in width/height depending on the remaining space of the container.

In your case, we can simply set the flex container's width (your wrapping div) to 100%. To distribute space evenly between the items, we can set all the items' initial widths to 0. Then, distribute the remaining space of the container (which is still 100%) evenly using flex-grow to 1 for each flexbox item. However, this will make all the items similar in width. To make the center div wider, you can set the flex-grow to 2. This will make it so that the left div, center div, and right div have 25%, 50%, and 25% of the container's remaining space in width respectively. I really recommend reading further about flex to understand what I mean. After reading about flex in the above link, try visiting this and this to learn more about flex-basis and flex-grow.

Here's a working solution using flex. Again, I recommend reading more about flex so that you can use flex better.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Helvetica;
}

body,
html {
  width: 100%;
  height: 100%;
}

#wrapper {
  display: flex;
  width: 100%;
}

#wrapper * {
  padding: 30px;
  text-align: center;
  color: white;
}

.left-align,
.right-align {
  flex-basis: 0;
  flex-grow: 1;
}

.center-align {
  flex-basis: 0;
  flex-grow: 2;
}

.left-align {
  background: #121212;
}

.center-align {
  background: #232323;
}

.right-align {
  background: #454545;
}

<div id="wrapper">
  <div class="left-align">Some content</div>
  <div class="center-align">Some content</div>
  <div class="right-align">Some content</div>
</div>

Answer 2

I have created a simple example for your layout. You can achieve it using flex box i.e

.box{
        display: flex;
        width:100%;
        justify-content:space-between;
      }

Here is the link: https://codesandbox.io/s/optimistic-euclid-xmv6h

Hope it answer your question.