Table-cell element's not accepting max-width value

Question

Following this answer I tried to vertically center my header elements, however I'm having trouble since there's a container element in between that makes sure they're contained within a certain max-width and centered. I applied display: table-cell to this element and now its max-width doesn't work (occupies the whole screen width regardless of its max-width). How to solve this problem?

Markup:

<header class="banner">
  <div class="container">
    <a class="header__branding" href="<?php bloginfo( "wpurl" ); ?>">
      <img src="<?php bloginfo( "template_url" ); ?>/dist/images/baia_logo.svg" />
    </a> 
    <nav class="nav_primary">
      <?php wp_nav_menu( array( 'menu' => 'main menu' ) ); ?>
    </nav>
  </div>
</header>

CSS:

.banner {
    height: 160px;
    width: 100%;
    display: table;
    background: url(../images/header.jpg) 50% 50% repeat-x;
}
.container {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    vertical-align: middle;
    display: table-cell;
}    
.header__branding {
    float: left;
    width: 150px;
    height: 52px;
    display: block;
}
.nav_primary {
    float: right;
}

Answer 1

Here is an answer to your question exactly. I will leave the old one as an alternative.

The problem

From CSS 2.2 Specification:

In CSS 2.2, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.

So it seems there is no way of adding a max-width to a table-cell currently. You could add a table-cell to each side of the container and set a 1500px width to the container with media queries but this isn't preferred as there is a workaround.

---

A solution

If you want to limit the width of the nav provided in your link to 1500px you can add a container like you did but the block structure should be a little different.

Now you have:

• banner as a table
• container as a table-cell
• header_branding and nav_primary as blocks inside the cell

Consider changin the structure to following:

• banner to a block
• container to a table
• header_branding and nav_primary to table-cells

The banner is only a 100% wide background element.

Then give the container a max-width of 1500px like you did but remember to give it a 100% width also. Otherwize it wont try to expand to the whole width of the screen as it doesn't have to but now the max-width will be a limiting factor.

Here is a CodePen example provided here but with a container limiting the width to 1500px.

Your example modified:

.banner {
    width: 100%;
}

.container {
    max-width: 1500px;
    width: 100%;
    height: 160px;
    margin: auto;
    overflow: hidden;
    display: table;
}

.header_branding, .nav_primary {
    vertical-align: middle;
    display: table-cell;
}

.header_branding {
    width: 150px;
    height: 52px;
}

.nav_primary {
    text-align: right;
}

/* To make edges visible for the demo */
.banner, .container, .header_branding, .nav_primary { 
    background: rgba(0, 0, 0, 0.3);
    border: 1px dotted red;
}

<header class="banner">
  <div class="container">
    <a class="header_branding" href="">
      <img src="" />
    </a>
    
    <nav class="nav_primary">
      [Menu items]
    </nav>
  </div>
</header>