I am beginning to learn css. I have three divs that are contained inside of a parent div. The code to all three child divs are the same yet the third div drifts off to the side. How would one go about centering these divs inside of the parent element?

The parent div has been outlined in black to show it's relative position.

[![enter image description here](https://i.stack.imgur.com/4BZiC.png)](https://i.stack.imgur.com/4BZiC.png)

```css
#parent {
  border-style: solid;
  height: 300px;
  width: 2000px;
}

#blueBox {
  border-style: solid;
  border-width: 3 px;
  border-color: blue;
  height: 100px;
  width: 400px;
  margin-top: 50px;
  margin-left: 50px;
  padding: 10px;
  float: left;
  display: inline-block;
}

#skyBox {
  border-style: solid;
  border-width: 3 px;
  border-color: blue;
  height: 100px;
  width: 400px;
  margin-top: 50px;
  margin-left: 50px;
  padding: 10px;
  float: left;
  display: inline-block;
}

#rainBowBox {
  border-style: solid;
  border-width: 3 px;
  border-color: blue;
  height: 100px;
  width: 400px;
  margin-top: 50px;
  margin-left: 50px;
  padding: 10px;
  float: left;
  display: inline-block;
}
```

```html
<div id="parent">
  <div id="blueBox">
  </div>
  <div id="skyBox">
  </div>
  <div id="rainBowBox">
  </div>
</div>
```