Je ne peux pas faire en sorte que mon en-tête centre le contenu

J'essaie de tout mettre dans mon en-tête pour qu'il soit centré dans le tableau d'en-tête, mais je ne peux pas comprendre comment. J'ai réussi à le centrer verticalement mais je n'arrive pas à comprendre comment le centrer horizontalement. Pouvez-vous me dire comment faire? https://fiddle.jshell.net/rgfxs94L/2/

<div id="header">
  <div class="center">
    <div class="header_cells">
      <img onclick="get_page('?page=home');" title="logo" id="logo" src="http://www.rajohan.no/img/logo_small.png">
    </div>
    <div id="main_buttons" class="header_cells">
      <div id="home" class="header_cells">
        &lt;Home&gt;
      </div>
      <div id="cv" class="header_cells">
        &lt;CV&gt;
      </div>
      <div id="nyheter" class="header_cells">
        &lt;Nyheter&gt;
      </div>
      <div id="movie" class="header_cells">
        &lt;Film&gt;
      </div>
      <div id="games" class="header_cells">
        &lt;Spill&gt;
      </div>
      <div id="music" class="header_cells">
        &lt;Musikk&gt;
      </div>
    </div>
    <div class="header_cells">
      <form id="search_form">
        <input type="search" id="search_box" placeholder="S&oslash;k...">
      </form>
    </div>
  </div>
</div>

#header {
  border-top: 3px solid #e87f29;
  background-color: #f8f8f8;
  min-width: 100%;
  min-height: 100%;
  position: static;
  border-bottom: 1px solid #e8e8e8;
  display: table;
}

.center {
  text-align: center;
}

.header_cells {
   display: table-cell;
   min-height: 100%;
   min-width: 100%;
   vertical-align: middle;
}

#logo {
  width: auto;
  max-height: 40%;
}