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

**URL:** <https://forum.freecodecamp.org/t/i-am-stucked-since-last-5-6-days-help/299807>\
**Category:** General\
**Created:** [July 30, 2019, 7:51am UTC](https://forum.freecodecamp.org/t/i-am-stucked-since-last-5-6-days-help/299807 "2019-07-30T07:51:56Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shubham10200](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/shubham10200/32/141623_2.png) [@Shubham10200](https://forum.freecodecamp.org/u/Shubham10200)\
**Post date:** [July 30, 2019, 7:51am UTC](https://forum.freecodecamp.org/t/i-am-stucked-since-last-5-6-days-help/299807/1 "2019-07-30T07:51:56Z")

</div>

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 ☹ . Right now I am working on individual section.  
this is my page ‘[https://codepen.io/shubham10200/pen/pMeWqQ](https://codepen.io/shubham10200/pen/pMeWqQ)’  
I want it to come to center like this:

 ![Original](https://global.discourse-cdn.com/freecodecamp/original/3X/7/0/7051c0c19e7a57d79debfc5375bad2e36d2c6a79.png)

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](https://codepen.io/shubham10200/full/PMpOBx)’

Please help me align it to center ☹

---

<div class="post-metadata">

**Author:** ![leebut](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/leebut/32/10914_2.png) [@leebut](https://forum.freecodecamp.org/u/leebut)\
**Post date:** [July 30, 2019, 8:14am UTC](https://forum.freecodecamp.org/t/i-am-stucked-since-last-5-6-days-help/299807/2 "2019-07-30T08:14:56Z")

</div>

Looking at [https://codepen.io/shubham10200/pen/pMeWqQ](https://codepen.io/shubham10200/pen/pMeWqQ)  
What you have now:

 ![image](https://global.discourse-cdn.com/freecodecamp/original/3X/8/1/81a87623f784b8a7f0591321fcda86937cd9f8e8.png)

**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](https://global.discourse-cdn.com/freecodecamp/original/3X/e/d/edc51a19bbfd2f8a54e8fb80b2195a5fdd336b24.png)

---

<div class="post-metadata">

**Author:** ![ItsYaBoiOP](https://avatars.discourse-cdn.com/v4/letter/i/e8c25b/32.png) [@ItsYaBoiOP](https://forum.freecodecamp.org/u/ItsYaBoiOP)\
**Post date:** [July 30, 2019, 8:41am UTC](https://forum.freecodecamp.org/t/i-am-stucked-since-last-5-6-days-help/299807/3 "2019-07-30T08:41:41Z")

</div>

> [@leebut](#):
>
> - {border: solid 2px red};

I second this. Helps enormously to troubleshoot formatting!

---

<div class="post-metadata">

**Author:** ![Devendra0110](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/devendra0110/32/158925_2.png) [@Devendra0110](https://forum.freecodecamp.org/u/Devendra0110)\
**Post date:** [July 30, 2019, 9:05am UTC](https://forum.freecodecamp.org/t/i-am-stucked-since-last-5-6-days-help/299807/4 "2019-07-30T09:05:28Z")

</div>

Give your `<section>` these styles

```auto
{
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.

---

<div class="post-metadata">

**Author:** ![Shubham10200](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/shubham10200/32/141623_2.png) [@Shubham10200](https://forum.freecodecamp.org/u/Shubham10200)\
**Post date:** [July 30, 2019, 1:14pm UTC](https://forum.freecodecamp.org/t/i-am-stucked-since-last-5-6-days-help/299807/5 "2019-07-30T13:14:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![leebut](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/leebut/32/10914_2.png) [@leebut](https://forum.freecodecamp.org/u/leebut)\
**Post date:** [July 30, 2019, 1:23pm UTC](https://forum.freecodecamp.org/t/i-am-stucked-since-last-5-6-days-help/299807/6 "2019-07-30T13:23:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Shubham10200](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/shubham10200/32/141623_2.png) [@Shubham10200](https://forum.freecodecamp.org/u/Shubham10200)\
**Post date:** [July 30, 2019, 1:32pm UTC](https://forum.freecodecamp.org/t/i-am-stucked-since-last-5-6-days-help/299807/8 "2019-07-30T13:32:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 9:33am UTC](https://forum.freecodecamp.org/t/i-am-stucked-since-last-5-6-days-help/299807/9 "2021-01-17T09:33:20Z")

</div>

Closed on January 17, 2021, 9:33am UTC