I'm trying to create a very simple web page as part of a project, but when I view the page in a browser (Safari, Chrome & Firefox) there is additional white space to the right.
I've used a basic css reset:
* { box-sizing: border-box; margin: 0; padding: 0; border: none;}Also set a max-width on the body element of 1220px
When I inspect the DOM the body element is sized correctly at 1220px but when inspecting the root html elment the size is larger.
Here's my html & css
* { box-sizing : border-box; margin : 0; padding : 0; border : none; }body { font-family : Helvetica; font-size : 22px; max-width : 1220px; color : seashell; background-color : black; opacity : 0.9; text-align : center; }a { color : seashell; }header { width : 100%; height : 69px; display : flex; justify-content : space-between; align-items : center; border-bottom : 1px solid seashell; }.logo { margin-left : 10px; display : inline-flex; }.logo img { height : 50px; }nav { display : inline-flex; }.top-links { list-style : none; display : flex; justify-content : space-evenly; width : 350px; }<!-- Header & Navbar --><header><div class="logo"><img src="./images/img-tea-cozy-logo.webp" alt="tea cozy logo"></div><nav><ul class="top-links"><li><a href="#">Mission</a></li><li><a href="#">Featured Tea</a></li><li><a href="#">Locations</a></li></ul></nav></header>