I am facing an issue with my parent div and three children. I want one child to float left of the parent, one to be in the exact center of the parent, and one to float right of the parent. However, the floated right element is going outside of the parent div, even though there is enough space.
#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>