Tell us what’s happening:
I can’t center any of these elements with bootsrap, css flex, block or margins auto auto. I’ve been playing around with various ways but nothing seems to work so I think there might be something wrong with the code. Could someone please take a look, it’s extremely frustrating as you are all probably aware
For the codepen to work with the bootstrap styling, you need to add it to the <head> of your pen in the settings, since In CodePen , whatever you write in the HTML editor is what goes only within the <body>
I forked your codepen to see what was going on and I applied the classes d-flex align-items-center to the #main-container instead and it is working. Looks like a mess as of now, but at least it shows bootstrap is indeed working on your pen.
thanks, i’ve taken that off but nice to know it does work. I havn’t used bootstrap too much so far. thats also what happened when i initially applied {display: flex} to the main-container. but after adding {flex-direction: column} the page aligned itself vertically, back to the original structure i created it in. it’s all refusing to budge to the center though but i’m thinking it might be the css animations i’ve added to the page load. I’ll have to mess around with it a bit more or maybe take the {translateX:50px} off as it might be instructing the elements to be positioned where they are
