Margins and padding are the bane of my existence. Any ideas?

HTML-CSS
1

In the above pen I’m attempting to recreate a website just by looking at it and I am having two issues:
1.) on the sides of the site there is the slightest bit of a margin, even though I set them to zero for the body.
2.) The image grid on the lower half of the side has padding between each column, how do I remove this?

If it’s not too much to ask, could you also explain what I did wrong in the first place? I don’t like “hacky” code and I want to make sure I’m doing everything clean, semantic and correct.

Thanks in advance!

2

  1. It probably has to do with body margin or padding. By default, browsers assign default values to body, so set body’s padding and margin to 0.

  2. .col-sm-4 is giving paddings. Try overwriting it to 0.

3

I’ve set the body margin and padding to 0 and it still doesn’t seem to be working :frowning: and I overwrote col-sm-4’s padding to 0 which worked! Thank you very much

4

No prob!

Looks like in this case, it’s not your body. It’s .container-fluid that has paddings.

Btw, your image gallery is creating a side scroll bar.

5

I removed container-fluid and that worked for getting rid of the margins, but the images still have a little bit of overhang into the right of the div, causing the side scroll bar. I’ve been googling like crazy and can’t seem to find a fix :confused:

6

.row has margins on the side.

1 Like
7

For future reference, if you want to start clean and strip out default margins/padding:

If you’re using Bootstrap, if you want to do things like adjust column gaps etc, then you probably want to investigate using the SCSS source (and adjusting the variables that set the values you’re trying to override) rather than trying to override the CSS, which will be painful.

3 Likes
8

Thank you so much for this! I’m still new to everything and slowly figuring out CSS, I appreciate the tip!