Trying to center a div, but still off center?

I’m trying to center the bottom section of my form for the form challenge (the heading, text box and submit button), and while text-align: center moves it towards the center it’s still off. Any help on why this is happening and how to fix it would be great. I’ve also tried inputting flexbox to center the content with no success.
Here’s my code: https://codepen.io/kianaml/pen/xMYpWx?editors=1100
Thanks in advance!

Hi! The kind of hack-y way I figure this kind of thing out is to add a background-color to the element I’m having trouble with! Doing that in this case shows that it’s being pushed from the left side of the box, which tells me that it’s probably being affected by padding from the element it’s in. Using the inspect tool built into Chrome, i can see that this is the #bulk element, which has a padding of 30px.

1 Like

Sorry, I didn’t even think to offer a solution! The best way to avoid this kind of thing is adding the padding to the elements themselves instead of the container they’re in, so you have more fine control over what is padded and what isn’t.

1 Like

Something to consider is using a block level element to group the fields together, like a div or fieldsethttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

With the things you want to center in a block element you can try the trick of setting the left and right margin to auto.

try adding the following css to specifically the things you want to center, not the container (make sure that’s at 100% width!):

...
margin-left: auto;
margin-right: auto;
...