When debugging issues with CSS layouts it can sometimes be tricky to really understand what is going on.
Using either your source code directly or the dev tools you can add this to any page:
outline: 1px solid red;
This adds a red outline to every element on the page (
Why Outline And Not Border?
It’s down to how the CSS box model works. Outline width does not affect the layout of elements according to CSS box-sizing rules, but border widths could!
If some elements are set to use
and other elements are using the default
then the layout of those elements will respond differently to different border widths:
border-boxincludes border widths in the calculated width of the element
content-boxadds border widths to the calculated element width