How would you center three child divs inside of a parent div with css?

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.

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

Element Div Boxes