Float right element outside parent

Question

I have a parent div and three children. I want someone to swim to the left of the parent, one to be in the exact center of the parent, and the other to swim to the right of the parent. but the moved right element went beyond the parent div. its not due to lack of space.

fiddle

#boards {
  width: 100%;
  height: 500px;
  background-color: white;
  text-align: center;
}
#boards p {
  font-family: 'bebas_neueregular';
  color: rgba(160, 224, 247, 1);
  margin-top: 30px;
  font-size: 50px;
}
.board_items {
  width: 250px;
  height: 300px;
  background-color: gray;
}
#board_items_container {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  background-color: orange;
  padding: relative;
}
#board1 {
  float: left;
  padding: relative;
}
#board2 {
  margin-left: auto;
  margin-right: auto;
  padding: relative;
}
#board3 {
  float: right;
  padding: relative;
}

<div id="boards">
  <p>TOP BOARDS</p>
  <div id="board_items_container">
    <div id="board1" class="board_items">
    </div>
    <div id="board2" class="board_items">
    </div>
    <div id="board3" class="board_items">
    </div>
  </div>
</div>

Run code

Answer 1

In your HTML, move the right-handed element to the element that you want to float it:

<div id="boards">
  <p>TOP BOARDS</p>
  <div id="board_items_container">
    <div id="board1" class="board_items"> <!-- float: left -->
    </div>
    <div id="board3" class="board_items"> <!-- float: right -->
    </div>
    <div id="board2" class="board_items"> <!-- not floated -->
    </div>
  </div>
</div>

Answer 2

Try using the following css code:

#board1 {
    display: inline-block;
    float: left;
    position: relative;
}
#board2 {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
#board3 {
    display: inline-block;
    float: right;
    position: relative;
}