How do I remove the extra space on the right side of this a element?

HTML-CSS
1

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;
}
2

hard to help without actual code to play with (for eg. in codepen)
but have you tried to add borders around everything so you can see where things may be encroaching on their given space?

3

that’s the code as a codepen, do you want to make the whole nav red or something else?
https://codepen.io/Michael3145/pen/XBVRPE

1 Like
4

so just to confirm the issue, the problem you want to get rid of is all the extra space between the red area and the word ‘hello’?

image
image3840×2060 481 KB

5

Oh sorry for not being clear guys. I wanna remove the red space on the right side of “Final Spatula”. The extra space on the right side of the a element.

I forgot to edit the first sentence from “nav element” to “a element”.

6

sorry I didn’t respond right away but it looks like you changed your page in the meantime?

image
image3840×2060 614 KB

7

Yes thats was me, sorry :frowning:

8

pls don’t apologize. I just want to understand the current issue after your latest code change…

9

I finally burned all down it where maybe a magic error

10

it looks like you fixed the OP’s original problem?

11

I didn’t change anything. I don’t know where you got that code lol

12

Click on the codepen that @Michael55555 created for you.
It looks like he solved your issue…

1 Like
13

Oh wow it looks like he did. Thanks @Michael55555! I’ll try and implement it to my code later. And thanks for that letting me know about that star thing in CSS haha

And thanks for trying to help too, @hbar1st :smiley:

1 Like
14

It turns out the reason for the extra space is that I used a percentage value for “#spatula”'s width. There’s no extra space if a pixel value is used. I don’t know why it works that way but at least the extra space is finally gone.

It’d be great if anyone could explain the technical reason behind it, though.