Center a div container without setting width

Question

I am trying to center my div responsively. But I am unable to do it without setting a width...

<div class="wrapper">
    <div class="container">
        <div class="left box">Content</div>
        <div class="right box">Content</div>
    </div>
</div>

.wrapper {text-align:center}
.container {width:100%; margin: 10px auto}
.left {width:69%;max-width:350px; background:blue}
.right {width:29%;max-width:150px; background:red}
.box {float:left;padding:20px}

How can I keep the .container in the middle ?

Demo: http://jsfiddle.net/z9zydnwL/

Answer 1

Flexbox can even center floated children!

So I can simply add display:flex and justify-content: center; to the container

.container {
    margin: 10px auto;
    display:flex;
    justify-content: center; /* align horizontal */
}

FIDDLE

Browser support these days is also good

.wrapper {
  width: 100%;
  text-align: center
}
.container {
  margin: 10px auto;
  display: flex;
  justify-content: center;
  /* align horizontal */
}
.left {
  width: 69%;
  max-width: 350px;
  background: blue
}
.right {
  width: 29%;
  max-width: 150px;
  background: red
}
.box {
  float: left;
  padding: 20px
}

<div class="wrapper">
  <div class="container">
    <div class="left box">Content</div>
    <div class="right box">Content</div>
  </div>
</div>

Answer 2

One solution is to replace float with inline-block:

.wrapper {
  text-align: center
}
.container {
  margin: 10px auto;
  font-size: 0;
}
.left {
  width: 69%;
  max-width: 350px;
  background: blue
}
.right {
  width: 29%;
  max-width: 150px;
  background: red
}
.box {
  display: inline-block;
  padding: 20px;
  font-size: 16px;
}

<div class="wrapper">
  <div class="container">
    <div class="left box">Content</div>
    <div class="right box">Content</div>
  </div>
</div>