I created a design resembling the French flag and I want to maintain the same margin from the edge of the browser window. However, the ratio of the container may change. The image below illustrates what I have implemented.
https://i.sstatic.net/mInBn.png
Despite my intention for margin: 0 0; to keep all margins at zero, only the top and left margins behave as desired. Unfortunately, the right and bottom margins do not cooperate.
https://i.sstatic.net/R0SIX.png
Is there a way to set all margins equally? Below is the complete code snippet:
#wrap {
/*I've attempted adjustments here*/
position: absolute;
width: 90%;
height: 90%;
/*height: 500px;*/
margin: 0 0;
border: 4px solid #000;
}
#wrap div {
width: 33.3333333333%;
height: 100%;
display: inline-block;
}
#wrap div:first-child {
margin-right: 33.3333333333%;
background: #003153;
}
#wrap div:first-child + div {
background: #cc3333;
}<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
</head>
<body>
<div id="wrap">
<div></div>
<div></div>
</div>
</body>
</html>