I have a group of squares that I want to resize proportionally when the screen size changes, but they keep overlapping instead
HTML
<div id="Container">
<div id="smallSquare1">square 1</div>
<div id="smallSquare2">square 2</div>
<div id="smallSquare3">square 3</div>>
<div id="smallSquare4"”>square 4</div>
</div>CSS
#Container {
background-color: pink;
width: 90%;
height: 700px;
margin-left: 5%;
}
#smallSquare1, #smallSquare2, #smallSquare3, #smallSquare4 {
position: absolute;
background-color: blue;
width: 250px;
height: 300px;
}
#smallSquare1 {
margin-left: 5%;
margin-top: 20px;
}
#smallSquare2 {
margin-left: 48%;
margin-top: 20px;
}
#smallSquare3 {
margin-top: 350px;
margin-left: 5%;
}
#smallSquare4 {
margin-left: 48%;
margin-top: 360px;
}