3 column preview using HTML and CSS

@Hassiai I'm going to need more practice on this...I end up putting min width, regular width, max width, and then I get confused what is really needed. Sometimes my item won't center without it, but maybe it's because i didn't add min-height like you said. i'm driving myself crazy!

@myrojoylee, it drives me crazy as well, as you said with more practice you will get familiar with it. Cheer up, you will soon become a pro. :) :)

@MelvinAguilar I have a macbook pro but have a second monitor so i can look at it closer, so maybe that is where my error is. what should i be using then to compare it to the design? or should i not do this type of comparison? i just opened the file it gave me and added the white space that i thought was there, but it ended up messing it all up. how to fix? i also maybe do not know how to implement what you said about using a smaller margin.......

@myrojoylee If what you want is to center it, instead of using large margins, use a height defined in the body element

body {
   min-height: 100vh;
}

Use devtool to simulate a 1440px wide screen to see what your final screenshot would look like.

@MelvinAguilar I thought I used this since I even checked my margins using dev tools..........maybe I'm using it improperly? Or maybe I need a break HAHA

@myrojoylee It has centered it horizontally, but not vertically. To center it vertically you should set a height, and the only height I see is commented: /* height: 1500px; */

Try this:

body {
    background-color: var(--clr-neutral-200);
    display: grid;
    place-content: center;
    min-height: 100vh;         /* Add the height */
    /* height: 1500px; */ 
    font-family: var(--ff-body);
    font-size: 1.1rem;
}

.cars {
    /* margin: 6rem 1.75rem; */ /* Remove this margin */
   margin: 1.75rem; /* It is a more acceptable margin */
   . . .
}

@media (min-width: 800px) {
 .cars {
    grid-template-columns: 1fr 1fr 1fr;
    /* margin: 14rem 21rem 10rem; */ /* Remove this margin*/
 }
}

And don't worry if there are little mistakes, you've done a great job.

@MelvinAguilar oh, no i meant i thought i was using the dev tools to check what it looked like but i think i'm using dev tools improperly because i am consistently getting messed up margins lol. i haven't tried changing the height yet, i am not near my workspace to do it but will add the 100vh and delete the unnecessary lines later :D

@myrojoylee Hello :D

• are you talking about the design? if yes, you can use Figma/adobeXD or any editing app to track the right size for paddings, margins, gaps, etc. But don't focus on getting the right sizes for everything you might stuck on it for hours(talking about my experience xD)

• and you might want to learn CSS preprocessor now, like SASS it will make your job easier.

GOODLUCK!

@AsukalDePapa i've only completed beginner and intermediate css and html and have not used sass at all yet. i have the basics down, and got used to doing the media query but it's always the margins and sizes of things that look fine on my mac but not on here, ever, lol. should this matter? my head is spinning over "margin" and "sizing" problems.

@myrojoylee it matters but doesn't have to be perfect. I have a similar problem before, but it just my browser is zoomed in lol.

• it will actually help to watch some crash course where they build landing pages. This helps me a lot.

@AsukalDePapa Is there one you recommend me to watch first ? I need all the help :D

@myrojoylee this the first video I've watched By DesignCourse this is where I learned about the responsive navigation.