I have 3 different colored squares and a button. How can I align the button directly beneath the squares?
Currently, the button is displaying on the same line as my colored squares in #squares, and it's aligned to the left. Any help or suggestions would be greatly appreciated.
#div1 {
background-color: red;
width: 100px;
height: 100px;
margin-right: 10px;
}
#div2 {
background-color: green;
width: 100px;
height: 100px;
margin-right: 10px;
}
#div3 {
background-color: blue;
width: 100px;
height: 100px;
}
#squares {
display: flex;
position: absolute;
margin-left: 35%;
}
#button {
width: 100px;
height: 50px;
clear: both;
}<div id="squares">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<div id="button">
<button>Click me!</button>
</div>