How do I center these two divs with the container being displayed inline-block?

Question

I'm having trouble centering these two floated left divs into a container which has a height of auto and a display set to inline-block. I've given my container a max-width of 1600px and when the window is stretched wider than 1600px, the container stays pinned to the left. I tried text align:center, and margin:0 auto, on the container but I'm not getting the result I'm looking for.

Here is my code.

.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>

Answer 1

You can either do:

body { text-align: center } to center the .keyfacts, but this will require you to do .keyfacts { text-align: left }

I would go with .keyfacts { display: block, margin: 0 auto } instead.

If an element is display: inline-block, then the parent will need a text-align: center to center the element, but this affects all children elements within the container.

If an element is display: block, then applying margin: 0 auto on the element itself (NOT THE PARENT) will center the element.

Answer 2

If you want the parent container to be centered, then div.keyfacts must be a block level element, for example, display: block or display: table.

In both cases, margin: 0 auto will center the container.

Since you are specifying the width for div.keyfacts, then either choice will work.

(I adjusted the width and max-width values for demonstration only.)

.keyfacts {
  width: 70%;
  height: auto;
  max-width: 450px;
  padding: 60px 3% 60px 3%;
  background-color: #634A4B;
  display: table;
  margin: 0 auto;
}
.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>

Answer 3

see this working sample: https://jsfiddle.net/s8rL8e8v/ if your content has a height, you dont need to put height on your container div. just put overflow:hidden and it will cope all the content inside it and put some padding.

.keyfacts {
        width: 94%;
    max-width: 1600px;
    margin: 0 auto;
    overflow: hidden;
    padding: 60px 3% 60px 3%;
    background: #634A4B
}

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