One margin is not what I set it

One margin is not what I set it
0

#1

Hello hello!

I’d be much obliged to whoever could help me figure out why the “about me” div of my portfolio page has a right margin bigger than the left, despite the fact that I set them both as 100px. There’s no problem with the “portfolio” section so I’m thinking one of the objects in the “about me” section is forcing the problem, but I don’t see what.

Thanks!!


#2

I fail to see the problem:

your #about-me has 100px margin on both left and right,

and your about-me-div has a computed margin of 340px on both left and right.

Perhaps is the fact that the about me section does not align with the welcome giving the impression of a different margin.

So my question is, exactly how did you pictures your page to look like?
For instance you gave the about-me-div a class of col-sm-5, which is an interesting design choice for a 12 column system (Bootstrap)…
I’d imagine a col-6 ( == half the row length) instead of a col-5 (roughly a 42% of a row length).


#3

Thanks for the reply.

For me, the left and right margins aren’t equal. They might look equal depending on where your horizontal scroll is- moving it to the left should reveal that they’re not (or else it’s appearing differently on our computers). The more obvious sign that something is wrong is that the “about-section” and “portfolio-section” are not aligned on the right side.

But, now that I notice the horizontal scroll (I didn’t before), I think the bigger problem is actually with the “portfolio-section.” I measure 1.25" for the right margin and only 1" for the left. But the “about-section” margins are off too- I measure 15/16 of an inch on the right.

The “about-me-div” is centered nicely inside the “about-section”; I don’t think there are any problems there.


#4

To properly inspect elements and how they are rendered on your browser, you should use the developer tools.

Every browser has its own, according to the one you use the path to open is slightly different.
for example in chrome is under View / Developer / Developer Tools.

In there you can go in elements tab and inspect every element on your page, including margin and padding.

It should help you figure out where’s the issue/what you want to accomplish.


#5

That’s a good idea. I was actually wondering earlier if that’s what web developers do. Thanks!