Container won't center - html

Question

This container stubbornly refuses to center. Demo: http://codepen.io/Diego7/pen/KzXgZN
I've tried just about every centering code I can find on the web, to no avail.
Removing width: 90%; from the css aligns the container to the left, even though margin: 0 auto; is telling it to center.
Sorry if this question isn't up to StackOverflow's 'standards', but codingforums.com are down at the moment :(
Thanks heaps!
HTML
<div class="container">
<article>
<header>
<img src="https://softwarereviews.files.wordpress.com/2016/04/bg-header-no-logo.png" width="972px"><br />
<h2>Information</h2>
</header>
<p>There's currently is no information available. Sorry.</p>
<footer>
© 2016
</footer>
</article>
</div>
CSS
##import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', sans-serif;
background: #fff;
}
.container {
list-style:none;
margin:0 auto;
width:90%;
padding-top: 20px;
background: #fff;
border-radius: 6px;
box-sizing: container-box;
}
article header h2 {
color: #282828;
font-size: 1.2em;
font-weight: normal;
display:inline;
line-height: 1.3;
}
article p {
font-size: 1em;
display:inline;
line-height: 1.5em;
color: #282828;
max-width: 972px;
}
article footer {
font-size: .9em;
display:inline;
color: #999;
}
a {
color: #2790ae;
text-decoration: none;
outline: none;
}
a:hover {
color: #0f6780;
}

Answer 1

Your .container is already centered: if you change background to red you will see it. And, if you add text-align property its content will be centered too.
.container {
list-style:none;
margin:0 auto;
width:90%;
padding-top: 20px;
border-radius: 6px;
box-sizing: container-box;
text-align:center;
background: red;
}

Answer 2

If you make the width a bit narrower (like 70%), you see that it IS centered.
by the way: " list-style:none;" has no effect whatsoever, and "box-sizing: container-box;" should be "box-sizing: content-box;"

Answer 3

Looks like you're centering the <div class="container">, but it doesn't look like it, because you're looking at the image.
If you want the image to take up the entire <div> element (so that any centering takes effect on both), try something like the following, instead of using an <img> element:
div.container {
background-image: url(https://softwarereviews.files.wordpress.com/2016/04/bg-header-no-logo.png);
}
There are other properties you can use to fiddle with precisely how the image is displayed. You can find more info here.

Answer 4

If you are using container after float tag. It can create problem sometimes. So to avoiding this user <div class="clear"></div>. Also clear class properties would be:
.clear{
clear:both;
margin:0px;
padding:0px;
height:0px;
font-size:0px;
line-height:0px;
float:none;
}
Hope it will be helpful..