profile-card-component-main

Hello Luis, congrats on finishing the challenge pretty good job!

If you don't mind I would like to help you with your questions.

The problem with the picture is that you are using position relative on the image, but the container is still getting the space that your image should be ussing, there is a little bit of a trick here, you can set your img margin to a negative number, in this case you set it to top: -3rem, try using in the same image margin-bottom: -3rem;, your selector should look like this:

.card__img--picture img {
  position: relative;
  top: -3rem;
  border: 6px solid #fff;
  margin-bottom: -3rem;
}

To get ride of the space you need to the defaults margins to 0, set your h2 dark-blue margin to 0, this strange behaviour of random margins usually comes from browser default stylesheet, you can reset all the browser default margins and paddings by using this at the start of your code:

* {
 margin: 0;
 padding: 0;
}

Hope my answers help you, if you have any questions, don't hesitate to ask!

Hey Luis. Great work on your solution! It's responsive and accessible. I've looked into your code and the issue comes from top attribute on img. You can fix it by changing it to margin-top :

.card__img--picture img {
    position: relative;
    margin-top: -3rem;
    border: 6px solid #fff;
}

When top attribute used, base position of the element stays same, just visually effects it's positioning. Using margin simply fixes that. For your second issue, it's due to the default margin of h2 and p. You can fix by using: h2, p {margin: 0;} To not deal with default margin, padding at the beginning of CSS in addition to box-sizing I'd suggest adding:

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

Aside these perfect solution and happy coding :)