I'm trying to center two divs horizontally in another div and have a max width defined for each. I'd also like there to be some space in between the divs so they are not touching.

The code below does not do what I was expecting:

HTML:

```
<div class="thing" id="outer">
  <div id="inner">
    <h2>Heading!</h2>
    <p>Words</p>
    <p>More words</p>
  </div>
  <div class="polaroid">
    <p>Words</p>
    <img src="path to image" />
  </div>
</div>

```

CSS:

```
.thing {
  min-height: 400px;
  padding: 3vh 1vw;
}

#outer {
  overflow: hidden;
  text-align: center;
  margin: auto;
  display: inline-block;
}

#inner {
  width: 50%;
  max-width: 600px;
  text-align: justify;
  /* float: left; */
  height: 422px;
}

.polaroid {
  position: relative;
  /* width: 50%;
  max-width: 350px; */
  /* float:left; */
}

.polaroid img {
  border: 10px solid #fff;
  border-bottom: 45px solid #fff;
  -webkit-box-shadow: 3px 3px 3px black;
  -moz-box-shadow: 3px 3px 3px black;
  box-shadow: 3px 3px 3px black;
  width: 50vw;
  max-width: 450px;
}

.polaroid p {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 0px;
  bottom: 0px;
}

```