Cause of <div> shift?

Hello!
The timeline in my tribute page <id="timeline"> is shifted to the right by 10px and I’m not sure what is causing it. I added margin-right: 10px; in CSS to correct it but I’d prefer to fix it the proper way (not having it occur in the first place). I thought maybe it had to do with <ul> or <li> default settings so I changed them all to <div> which did not help. I’m using vanilla HTML and CSS, any insight would be appreciated.
-J

https://codepen.io/JesseHope/pen/gNNjxb?editors=1100

If your divs are within a <li>, they’re always going to be indented. If they’re a direct child of a <ul>, then they’re in an invalid place, and it’s up to the browser how it renders, which could include indenting it.

Whenever you have a problem with layout, I recommend pulling up your DOM inspector (Ctrl-Alt-C in chrome or firefox, ⌥⌘C on mac). Move the mouse over the offending div. If it highlights the space where there’s a gap, your problem probably is in the margins of the div. Otherwise, if you have some invisible element somewhere taking up space, you’ll see it highlighted when you move over the gap. Click on the element to get into its properties, where you can do things like inspect the margins and edit the CSS in-place to see where to fix things.

There’s so much you can do with the developer console. I use it every day and I’m only scratching the surface of its features. Get to know it.

The first and third child divs of main have no padding. The second and fourth child divs have 5px padding on all four sides. That’s your 10px width. Sleuthed with developer tools.

I removed “margin-right:10px” from #timeline in style and it is not causing any kind of space towards right of the list. There might be issue because of < li> tags and your current code is working fine.

@chuckadams It’s all <div>, no list elemets at all. I am using Dev Tools and inspector - I just don’t see where it’s getting shifted 10px right. There is no margin or invisible element to target.

@tlc35us It wouldn’t make sense to me that 5px padding on each side would shift the <div> in one direction but I did update my code to add the same padding to all four child <div> elements and it didn’t change anything. It was worth a shot though.

@ShonaMcdermid the entire 3rd <div> child element of <main> is shifted to the right 10px. Maybe it’s hard to see but I know it’s happening and I don’t know why.

Thanks for the input guys, I really do appreciate it. Still has me stumped though.
-J

I changed display from flex to block, width percent to pixels, added a reset stylesheet, and all I got was the first and third child div of main was reduced from 10px to 2px offset. Try it locally on your machine maybe it’s a codepen anomaly.

1 Like