Positioning section and aside

Question

Heyo, so I'm having a bit of hard time making aside and section to position correctly when making the screen smaller. What happens is the section drops below the aside when shrinking the screen. Here the pen: https://codepen.io/anon/pen/gxjbyg

Here's the code:

#container {
width:90%;
margin: 0 auto;
background:pink;
height:300px;
}
aside {
width:12%;
height:100px;
background:green;
border-radius:20px;
display:inline-block;
margin-right:20px;
}
section {
width:86%;
height:100px;
background:purple;
border-radius:20px;
display:inline-block;
}

Answer 1

Use width:calc(86% - 20px); one the section to take on consideration the margin-right that you used on aside which is 20px;

 #container { width:90%; margin: 0 auto; background:pink; height:300px; } aside { width:12%; height:100px; background:green; border-radius:20px; display:inline-block; margin-right:20px; } section { width:calc(86% - 20px); height:100px; background:purple; border-radius:20px; display:inline-block; } 

 <div id="container"> <aside>ASIDE</aside> <section>SECTION</section> </div> 

Answer 2

Here margin-right: 20px; of aside inturn causes the overall width to increase above 100%. Reduce this to margin-right: 15px; which will solve the issue.