CSS center between float: left and right inline without width

Question

I am really stuck with trying to center a div and have a div floating left and one floating right. In the end it should like somewhat like the first header in the graphic. However the second element, which should be in the center, always floats left like in the second example in the graphic. Example-Graphic

I have been able to center it when I set a the display to block and a specific width. But I want the width to be as large as the children, which I achieve by setting the display to inline-block, right? So is there any other way to do this?

Thanks for any help Tobias

HTML

<section id="header">
  <div class="content_box logo">
    TippMe-Logo
  </div>
  <div class="content_box user_management">
    <div class="user_icon">

    </div>
    <div class="user_name">
      <%= link_to "USER", "#" %>
    </div>
    <div class="user_logout">
      <%= link_to "(Logout)", "#" %>
    </div>
  </div>

  <div class="content_box navbar">
    <nav>
      <%= link_to "TIPPEN", "#" %>
      <%= link_to "HIGHSCORE", "#" %>
      <%= link_to "TABELLE", "#" %>
    </nav>
  </div>
</section>

CSS

// - - - - - VARIABLES - - - - - //

$background: #777777;
$main: #00143A;

// - - - - - GLOBAL STYLING - - - - - //

body{
  background-color: $background;
}

a{
  text-decoration: none;
}

#main_wrapper{
  width: 1440px;
  max-width: 90%;
  margin: 3rem auto 0 auto;
}

.content_box{
  border-radius: 0.6em;
}

// - - - - - HEADER STYLING - - - - - //
#header{
  .content_box{
    background-color: $main;
    padding: 0.2rem 0.5rem;
    display: inline-block;

  }

  .logo{
    float: left;
    color: white;
  }

  .user_management{
    float: right;
  }

  .navbar{
    margin: 0 auto;
    a{
      float: left;
      padding: 0 10px;
    }
  }

  a{
    color: white;
  }
} 

Answer 1

Your code is correct. Just add one css line.

#header{
    text-align: center;
}

demo - https://jsfiddle.net/dhananjaymane11/thwsegs8/1/