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

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?

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.

Hello @shaqkar :wave:

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="" alt="Picture of Malcolm X">

Hope this helps.

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?

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;
1 Like

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.

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

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

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

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.