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 rest:
* {
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.
Extra white space
Here’s my html & css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tea Cozy</title>
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<!-- 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>
</body>
<
/html>
* {
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;
}
New contributor
Slim Olivier is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.