Forgive the dumb question as I am sure its related to a margin I cannot seem to figure out how. Currently working on responsive html design for a basic website. The code works just find for two of the 3 @media sources I set but for some reason the in between size media runs into a visual issue.
Here is jsfiddle: https://jsfiddle.net/vhxs5jeb/
I believe this may be related to a margin-right: 10px but I don’t see why.
The issue only appears when the display is in between 762-991px. I am simply overlooking something but don’t see the reason. The endpoint for the second section is not meeting the end of the page as the 3rd section. Like I said super simple but I can’t seem to see it myself. Otherwise the site works as intended.
>Solution :
The cause of the misalignment is width: calc(50% - 10px)
The sections have a 10px right margin. When the viewport is between 762-991px, the margin of the second section is reduced to 0 and the width of the first two sections is calculated to be 50% – 10px, but there’s only 10px of margin between the two sections. Therefore, the width of the top row is 10px less than the third section.
Divide the 10px margin between the two sections and use that for the calculation.
@media (min-width: 762px) and (max-width: 991px){
section{
width: calc(50% - 5px);
}
}