perfume ad page, made using html and css, with lots and lots of flexb

Hello @AlexaGabriel!

Your solution looks great!

I have just a couple of suggestions for improvement:

• Avoid using percentage or viewport height/width based values to set an element's width and height. This can cause bugs and make your element grow too much on some screen sizes or not grow enough on others.

To fix that, use max-width with fixed values, like pixels to set a limit. By doing that, your project remains responsive, but it won't grow too much, because you set a limit for it.

For height, just add the content and let the container adapt. Most times it'll be just the size it needs to be and you can adjust what you need with margins and paddings in the elements inside of it.

I hope it helps!

Other than that, you did an excelent job!

Here are some details that may be useful to you.

• Apply a reset for the universal selector:

* {
    box-sizing: border-box;
    margin: 0;
}

• Remove unnecessary properties from the body, also apply the gap property to separate the main from the footer (which by the way, that <div class="attribution"> should be a footer) :

body {
    background-color: hsl(30, 38%, 92%);
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* align-content: center;  This is not going*/
    justify-content: center;
    align-items: center;
    gap: 20px;
}

@media screen and (max-width: 767px){
  body {
    margin: 20px;
  }
}

• It is simpler if you use grid instead of flex to separate each part of the card in half. Additionally, you can use an overflow: hidden so you don't need to apply borders to the image. I leave you my version in case you want to review it: My challenge