I can't seem to get these two floated left divs centered within a container that has a height set to auto and a display of inline-block. The container has a max-width of 1600px, but when the window is stretched wider than that, it stays aligned to the left. I've attempted using text-align:center and margin:0 auto on the container, but I'm not achieving the desired result.
Here is the code snippet:
.keyfacts {
width: 94%;
height: auto;
max-width: 1600px;
padding: 60px 3% 60px 3%;
background-color: #634A4B;
display: inline-block;
}
.keyfactsleft {
float: left;
width: 47%;
height: auto;
padding-right: 3%;
}
.keyfactsleft p {
font-family: 'Raleway', san-serif;
font-size: 24px;
line-height: 32px;
font-weight: 100;
color: #58595b;
margin-bottom: 35px;
}
.keyfactsright {
float: left;
width: 50%;
height: 465px;
background-image: url(_images/meredith-manor-aerial.jpg);
background-size: cover;
background-position: center center;
background-color: #A05B5C;
}<section class="keyfacts">
<div class="keyfactsleft">
<h3 class="red">When</h3>
<p>Saturday, October 14, 2017 at Five in the Evening</p>
<h3 class="red">Where</h3>
<p>Meredith Manor<br>2270 Pottstown Pike, Pottstown, PA 19465</p>
<p>Our convenient venue will host both our ceremony and our reception. Its location is only a few miles down the road from the Hilton Garden Inn, where you’ll be sleeping if you plan on getting wild and staying over.</p>
</div>
<div class="keyfactsright"></div>
</section>