Hubble Landing Page

For the left and right sides space of the page, give the main a max-width of 1440px a width of 80% and margin: 0 auto. don't change this in the media query

main{
max-width: 1440px;
width: 80%;
margin: 0 auto;
}

Give the .top a padding top and bottom value and .content a margin-top and bottom value.

in the media query give .post a margin top value.

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hi! First of all congratulations for your work

Here are some tips:

• About the media query ( @media only screen and (max-width: 375px) maybe you can add a larger max-width because mobile screens do not all have a standard size of 375px. Maybe I would set the rule at 450 or 500px. And then I would write another one from 375 or 400px to add the background for the mobile version).

• Also, the background-desktop should be changed to background-mobile in the media query.

• For the div.container you can try this:

.content {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap; /* This means that the flex, 
when it no longer fits on the screen, becomes a column, 
i.e. the content is placed one below the other. */
    align-items: center;
    gap: 30px;  /* This adds a gap between the two divs */
    margin-top: 80px;
}

• For the .device img I would make it a little smaller so that the flex-row fits on a wider variety of screens.