Problems with weird html placement?

I’m making a static website, and I’m trying to use bootstrap to the best of my abilities to make sure everything is responisve. I worked out a header that I liked, however when I create a new div with content in it, the content actually goes above the header I’ve just created. The only way I’ve been able to fix this issue is if I add margin-bottom to my new div, which would be fine except that the image changes when the window is resized, but the margin doesn’t. Please help, why are my new elements appearing above my header?

Have you got any custom CSS? Often these odd things happen because the padding or margins push items around too much. Is the div you’ve created within the header, or is it below? If it’s below, have you created a new row div and a new column div for the new content?

Do you have a link to your Codepen so we can see the code?


Just had to fiddle with it. All good now. My position tags were mixed and matched, so I changed them all to the same thing and then I created a new row