Josh N Josh N - 7 months ago 14
HTML Question

Container won't center

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>
&copy; 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

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;
}