I am stucked since last 5-6 days :( Help

I’m working on product landing page project . I completed it 5-6 times but not perfectly . I’m again working on the same . But now I am stucked at a place :frowning: . Right now I am working on individual section.
this is my page ‘https://codepen.io/shubham10200/pen/pMeWqQ
I want it to come to center like this:

But when I’m giving margin to the features section to bring it to center, features class gets disassemble like this : ‘https://codepen.io/shubham10200/full/PMpOBx

Please help me align it to center :frowning:

Looking at https://codepen.io/shubham10200/pen/pMeWqQ
What you have now:

EDIT: to show the borders, I set a temporary selector * {border: solid 2px red};

You could set your <section> as a flex container and justify the content to center.
Create a wrapper flex container around all of the features divs. This is what happens:

1 Like

I second this. Helps enormously to troubleshoot formatting!


Give your <section> these styles

display: flex;
    flex-direction: column;
    align-items: center;

and add width property in your features class like width: 68%;, you can use any percentage values.

1 Like

Can I get the codes of the page you made . I’m still unable to center it :frowning:

Being as you can’t work it out, follow @Devendra0110’s code. that is what I did for the <section> selector.
The other thing you need to do is just add a <div> before your first <features> div, and a </div> after your last <features> div.

1 Like

Yeah ! That’s worked . But why? May I know why it didn’t worked when I didn’t put everything into container?