Someone already solved this problem for me last night but I totally forgot how CodePen works and that I have to fork other people’s code if I want to make sure I always have access to the pen. Before I realized that I had to fork it, they had already deleted the pen. Sorry to the person who helped me solve it…
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');
* {
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;
}