HTML Border Box Question

Help / Questions
#1

Hello,

I’m currently working on the HTML/CSS prep work and I think I have all criteria down, however I am trying to get my form and it’s border to look correct around 600px. I’ve tried using the border box sizing in my CSS styling file to make sure the padding/border also count towards the spacing but I’m not quite sure why it isn’t working. Here is what I have so far and what it looks like while the screen is at 600px exactly. Any help understanding this or if I’m doing something incorrect would be very appreciated!

image
image657×932 49.8 KB

The right most border clips through the screen:

image
image963×909 134 KB

#2

Hi, @Rhadiak! Welcome to the community! :wave:

Try taking the box-sizing style off of the form selector and move it out to be by itself like this:

* {
    box-sizing: border-box;
}

See if that fixes it for you.

#3

Thanks for the reply!
I think I understood what I was doing wrong. When the screen is greater than or equal to 600px wide then the display is set to grid instead, since that was one of the criteria. So I don’t believe the border box sizing was applying to the card.