side by side float center css

Question

I am trying to center two images side by side, but for some reason it always displays the images on the left. Does anyone know how I could get them centered and next to each other?

Thanks!

#container {
  width: auto;
  margin: 0 auto;
  border: 1px solid #665544;
  text-align: center;
}

#box1,
#box2 {
  border: 1px solid white;
  float: left;
  min-height: 200px;
  color: white;
}

#box1 {
  width: 250px;
  background-color: #111;
}

#box2 {
  width: 250px;
  background-color: #777;
}

<div id="container">

  <div id="box1">
    <h1>header1</h1>
    <p>aaa</p>
  </div>

  <div id="box2">
    <h1>header2</h1>
    <p>bbb</p>
  </div>

</div>

Answer 1

Remove float: left and use display: inline-block

#box1, #box2 {
    border: 1px solid white;
    display: inline-block;
    min-height: 200px;
    color: white;
}

#container {
  width: auto;
  margin: 0 auto;

  border: 1px solid #665544;
  text-align: center;
}

#box1, #box2 {
  border: 1px solid white;
  display: inline-block;
  min-height: 200px;
  
  color: white;
}

#box1 {
     width: 200px;
     background-color: #111;
}

#box2 {
     width: 200px;
     background-color: #777;
}

<div id="container">

<div id="box1">
 <h1>header1</h1>
 <p>aaa</p>
</div>

<div id="box2">
<h1>header2</h1>
<p>bbb</p>
</div>

</div>

Fiddle