css div max-width not working - css

Question

I think it's my lack of css knowledge, but i don't get this thing working. My purpose is to have a container div which have the MAXIUMUM witdh of 800px and aligned in the middle of the page, with one or two elements per 'row', depending on the available screen-space. But in the example you see that the whole 800px is taken. How to accomplish that the 800px is only the max?
HTML:
<div style="background-color:red;max-width:800px;display: inline-block">
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
</div>
CSS:
.contentgedeelte {
width:310px;
background:white;
margin:10px;
float:left;
border-radius:5px;
padding:5px;
}
http://jsfiddle.net/plunje/LmJSy/

Answer 1

OK, here you go:
#container {
width:800px;
margin:0 auto;
text-align:center;
}
.row {
display:inline-block;
background:red;
margin:0 auto;
}
.contentgedeelte {
width:310px;
background:white;
margin:10px;
border-radius:5px;
padding:5px;
display:inline-block;
text-align:center;
}
You'll need to add a .row element to wrap your contentgedeeltes in pairs (if that's how you want them displayed). To be honest you're better off just calculating the widths properly, but if you really can't, try this. Also, I've taken your container element, remove the inline styling and added the ID #container.

Answer 2

Use display: block; instead of inline.
Inline-block is for elements which line up side by side, not for pagewraps. If this is a center of the page container there is no need to display inline.
If you want the articles to display as inline elements, that seems to work.
Or just tally your styles to add up to 400px instead of 340px.

Answer 3

You need a little more structure. See below.
HTML
<div class="container">
<div class="row">
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
</div>
<div class="row">
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
.container {
max-width: 800px;
background-color: red;
padding: 1em;
overflow: hidden;
}
.contentgedeelte {
width:48%;
background:white;
margin:1%;
float:left;
border-radius:5px;
padding:5px;
display: block;
}