Can't center grid AND annoying white borders

HTML-CSS
1

Hi!!! I just have been having trouble with centering my grid… i used margin: 0 auto; but it doesn’t work… i’ve also tried align-items: center; with no luck either… any help is appreciated! :slight_smile:
Also, how can i get rid of those tiny white lines at the side of my sections? i don’t understand why i don’t have that problem with the nav bar but i do with the rest! Thank you in advance!

2

You’d only have to remove width:100% from your .projects-grid.
If you give it the full width, margin:0 auto won’t do anything because there’s no space left and right.

To get rid of the annoying white borders, add

body {
  margin:0;
}
1 Like
3

THANK YOU!! this is definitely something i’ll use over and over : ) Have a good friday!

4

I start every project with

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

Just saves a lot of frustration. Happy coding :love_you_gesture:

1 Like
5

amazing! thank you soooo much! one question though, what does the * represent?

6

The asterisk selector targets every element. EVERY element. Whatever you add to your page now, none of the elements will have any margin or padding (and all of them will have box-sizing:border-box).

Many elements (like p, all the headings h1 to h6, ul and li and many more) come with pre-defined margins and paddings, so you don’t have to care about making sure that you have some space between your headings and your paragraphs, for example. Removing them all means you’ll have to set them manually. You’ll have more control, but also more work.

If you have an existing project flying around somewhere, you could try it out and put that * selector at the top of your CSS to remove all margins and paddings, and see what effect it has.

1 Like
7

thank you for taking so much time for an explanation!! i really appreciate it! : ) I’ll do that rn!!! thank you again, a great learning opportunity for me!