I have the following CSS and HTML set:
html, body{
margin: 0;
}
header{
border: 1px solid green;
background-color: green;
height: 50px;
}
nav{
border: 1px solid red;
background-color: red;
height: 50px;
}
aside{
border: 1px solid yellow;
background-color: yellow;
height: 50px;
width: 40%;
float: left;
}
section{
border: 1px solid blue;
background-color: blue;
height: 50px;
width: 60%;
float: right;
}
<body>
<header>
</header>
<nav>
</nav>
<aside>
</aside>
<section>
</section>
</body>
<aside>
<section>
<aside>
width: 40%
<section>
width: 60%
100%
This is happening because of 4px of extra space is being covered by borders in aside and section boxes. Just provide box-sizing: border-box
to both;
html, body{
margin: 0;
}
header{
border: 1px solid green;
background-color: green;
height: 50px;
}
nav{
border: 1px solid red;
background-color: red;
height: 50px;
}
aside{
border: 1px solid yellow;
background-color: yellow;
height: 50px;
width: 40%;
float: left;
box-sizing: border-box;
}
section{
border: 1px solid blue;
background-color: blue;
height: 50px;
width: 60%;
float: right;
box-sizing: border-box;
}
<body>
<header>
</header>
<nav>
</nav>
<aside>
</aside>
<section>
</section>
</body>