Can someone tell me why there’s extra space on the right side of the a element whenever I open my website in Chrome? I managed to get rid of the extra space before I added the nav element but as soon as I added it, the extra space came back. I feel like it has to do with how the nav element interacts with the parent element or the flexbox. Please help.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>The Final Spatula</title>
<link rel="stylesheet" href="css/styles.css">
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</head>
<body id="container">
<header id="header">
<nav><a class="nav-link" id="logo-link" href="#top"><img id="spatula" src="https://d30y9cdsu7xlg0.cloudfront.net/png/228324-200.png" alt="spatula"><h1>FINAL<br>SPATULA</h1></a>
<a class="nav-link" href="#">
hello
</a>
</nav>
</header>
</body>
</html>
SCSS:
@import url('https://fonts.googleapis.com/css?family=Roboto');
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
img,
a,
nav,
header {
margin: 0;
padding: 0;
border: 0;
font-family: 'Roboto', sans-serif;
}
#container {
display: grid;
grid-area: 100px auto 100px / 20% auto 20%;
}
nav {
grid: 1 / 1 / 2 / -1;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
border: 3px solid black;
position: sticky;
top: 0;
}
#spatula {
width: 25%;
}
h1 {
display: inline-block;
margin-right: -9999px;
}
a:link,
a:visited {
color: black;
text-decoration: none;
}
#logo-link {
background-color: red;
padding: 5px 10px;
}
The problem was that I was using a percentage value for “#spatula”'s width. The extra space disappears if a pixel value is used. Here’s the solution since the pen doesn’t exist anymore:
HTML:
<header><nav>
<div class="nav-link" id="logo-link" href="#top">
<img id="spatula" src="https://d30y9cdsu7xlg0.cloudfront.net/png/228324-200.png" alt="spatula">
<h1>FINAL<br>SPATULA</h1>
</div>
<a class="nav-link" href="#">hello</a>
</nav></header>
CSS:
@import url('https://fonts.googleapis.com/css?family=Roboto');
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
nav {
border: 3px solid black;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#spatula { width: 50px; }
a:link, a:visited {
color: black;
text-decoration: none;
}
#logo-link {
display: flex;
background-color: red;
flex-direction: row;
align-items: center;
}