Apply *, *::before, *::after { box-sizing: border-box } as your first CSS rule. This makes sizing predictable everywhere. Modern resets also remove default margins, make images block-level, and inherit fonts in forms.
CSS Reset
/* Modern minimal reset */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
}
body {
min-height: 100vh;
line-height: 1.5;
font-family: system-ui, sans-serif;
}
img, video { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; }