What is the problem?
I am trying to align two boxes within divs to be on the same level as one another, whilst covering the whole page. The div widths should be 40% for the left and 60% for the right. And then the height/width of the divs inside should be
CSS is adding extra margin to the right div, therefore making the div's unevenly aligned from the top.
See the two examples below:
Not working codepen
- Unevenly aligned with correct widths.
- Evenly aligned with incorrect widths.
As you can see, the only change from the two codepen examples is that the width of the
div has been changed from
. This now leaves me 20% free, which I don't want. I want to keep the 60% width without the margin being increased from the top.
Why is CSS adding more than 2.5% margin from the top when only the width is increased?