Help! Can anyone help me fix my border around my images

[shaqkar]

I am trying to put a solid white border around my images but the border is not fitting around the images perfectly. Can anyone read my code and see where I went wrong?

https://codepen.io/Skarwani/pen/vYxpNyg?editors=1100

This is a link to my codepen.

 .project-image {
    height: calc(100% - 3.8rem);
    width: 100%;
    object-fit: cover;
    border: 2px solid white;

This is my CSS for my images.

[dewslyse]

Hello @shaqkar

@shaqkar

.project-image {
    height: calc(100% - 3.8rem);
    width: 100%;
    object-fit: cover;
    border: 2px solid white;

Try setting the height property in your .project-image to auto. This would wrap your border nicely around your project title.

Also, remove the class selector [.project-image] from the <img> tags in your project section. That is the cause of the problem.

 <img src="https://codepen.io/Skarwani/pen/zYorGEo/image/small.png" alt="Picture of Malcolm X">
        </img>

Hope this helps.

[shaqkar]

Hello and thanks for the reply. It did work but when I change the border pixels to 4px it doesn’t fit in the container properly. Do you know how to fix that?

https://codepen.io/Skarwani/pen/vYxpNyg?editors=1100

[dewslyse]

You can add box-sizing: border-box; to .project-image

 .project-image {
    height: auto;
    width: 100%;
    object-fit: cover;
    border: 5px solid white;
    box-sizing: border-box;
  }

[shaqkar]

one more thing mate if you don’t mind. My nav buttons do not link to the corresponding part of the page it should go to. How can I fix this?
Second part - I need to get rid of the purple color when the link is clicked on.

[dewslyse]

The hashtag # is missing from the anchor reference. You need to include it.
E.g.:

<a href="#welcome-section">About</a>

@shaqkar

Second part - I need to get rid of the purple color when the link is clicked on.

Which link? Which purple color? I don’t see any on my end.