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 height: 100%; and width: 90%;.
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.
Aligned codepen - Evenly aligned with incorrect widths.
As you can see, the only change from the two codepen examples is that the width of the TicketMainRight div has been changed from width: 60%; to width: 40%;. 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?
It's not "adding more than 2.5%", it's giving margin of 2.5% of the width.
Margin percentage is calculated against the width of the element. As for why, see this answer.