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

1

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:

Original
Original1365×468 22.6 KB

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:

2

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

image
image1808×439 27.1 KB

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:

image
image1796×413 27.4 KB

1 Like
3

I second this. Helps enormously to troubleshoot formatting!

2 Likes
4

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
5

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

6

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
8

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