div {

box-sizing: border-box;

}

Give the file a save and refresh your browser. Everything should line up perfectly now.

Right now you are probably thinking ‘What’s a border box?’ Well, the box-sizing property is a way of telling the browser how to handle our height and width values. By default, the box has a ‘content-box’ sizing, which means that border, padding and margin are not included inside the fixed width that we have set on our inputs. If we change the value to ‘border-box’ everything is included within the width, which can really help with our layout. You might have noticed that all of our divs on our webpage are suddenly slightly smaller, this is a good thing and shows that our code has worked as expected. By adding this rule into our CSS we are less likely to get tripped by with any other sizing issues down the line.

Our newly added CSS rules should look like so: