Tell us what’s happening:
i’m not able to align my div on using flex. whenever if I’m centering my sections, the alignment gets disturbed in one of my divs.please help.
Your code so far
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36.
Challenge: Build a Product Landing Page
Link to the challenge:
I think you need to be a little more specific about what you are trying to do here.
I want to perfectly align the divs and center them.
On centring the divs the alignment i don’t why is getting disturbed.
Is there a way?
There are a lot of divs on your page. Which ones specifically are you trying to center. I’m assuming you want to center #main, but are there others? Please be specific about which divs you are trying to center.
What have you tried so far?
Sorry for nothing explaining properly.
Ya I’m talking about the #main.
First i tried giving width to icons and also i tried grids but it was not giving a nice look.
Right now the content in your #main div is actually centering on the page. Widen your browser very wide and you will see that it centers. This is because you have align-items: center set on it. It seems like you want to narrow the width of that div so the content is a little more compact.
One way to do that would be to set a max-width on the div (I would suggest using em units) and then use auto for the left/right margin. Using this method you would not need the align-items: center property at all.
That’s just one simple way off the top of my head. I’m not saying it is the best way. It really depends on what you are trying to do.