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

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>

Answer 2

You can define a height or max-height for .container then use flex on header:
.banner {
height: 300px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container {
max-width: 500px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
CodePen: http://codepen.io/theblindprophet/pen/NAzAWj
This will not work for some versions of IE, check here for details.
With display: inline-block:
/* This parent can be any width and height */
.block {
text-align: center;
/* May want to do this if there is risk the container may be narrower than the element inside */
white-space: nowrap;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
CodePen: http://codepen.io/theblindprophet/pen/XKYKdy
Reference: CSS Tricks

Answer 3

Maybe a
box-sizing: border-box;
property is what you are looking for ;)

Answer 4

One possibility to vertically align elements inside the container it to use line-height as you know the height of your header. The downside of this is that you cannot have more than one row of text but usually this is the intent in the first place.
I tried to strip your code to the minimum and made a working demo here.
Basically if the container is 160px tall you can add line-height of 160px for the menu items to vertically align them to the middle.
To vertically align your image, I used the accepted method from this question.
To future proof, here is the code used in my demo:
* {
margin: 0; /* Illustrative */
padding: 0; /* Illustrative */
}
.banner {
background: #222; /* Illustrative */
width: 100%;
}
.container {
background: #aaa; /* Illustrative */
max-width: 800px; /* Change to desired value */
margin: auto;
overflow: hidden;
}
.header__branding {
background: #555; /* Illustrative */
float: left;
width: 150px;
height: 160px;
display: block;
}
.header__branding span {
height: 100%;
display: inline-block;
vertical-align: middle;
line-height: 160px;
}
.nav_primary {
float: right;
}
.nav_primary a {
line-height: 160px;
}
img {
background: #3867EA; /* Illustrative */
width: 100px; /* Illustrative */
height: 100px; /* Illustrative */
vertical-align: middle;
display: inline-block;
}
<header class="banner">
<div class="container">
<a class="header__branding" href="#">
<img alt="Logo" /><span>Title</span>
</a>
<nav class="nav_primary">
<a>Menu1</a> <a>Menu2</a> <a>Menu3</a>
</nav>
</div>
</header>