# Custom "TEAM MODULE" layout breaking

**URL:** <https://community.hubspot.com/t/custom-team-module-layout-breaking/1176>\
**Category:** CMS Development\
**Tags:** css, content-staging\
**Created:** [March 1, 2017, 2:00am UTC](https://community.hubspot.com/t/custom-team-module-layout-breaking/1176 "2017-03-01T02:00:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trifecta](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trifecta/32/60590_2.png) [@Trifecta](https://community.hubspot.com/u/Trifecta)\
**Post date:** [March 1, 2017, 2:00am UTC](https://community.hubspot.com/t/custom-team-module-layout-breaking/1176/1 "2017-03-01T02:00:54Z")

</div>

Hi,

We have a Custom Module( Team Custom Module), built by Hubspot for our team members. The modules line up 3 to a row as desired, except for when I add the 12th module, the bottom formatting/alignment breaks and pushes modules to new rows.

Here is what it should look like but with one extra team member (Urijah faber)

> **[Our Story](https://www.trifectanutrition.com/our-story)**
>
> We began Trifecta because we believe there are three fundamental areas of health—mind, body, and social. These areas are interdependent, meaning you cannot thrive in one area without thriving in the others.

Here is what it is currently doing when the new(12th)team member is added

> **[Our Story](https://www.trifectanutrition.com/our-story)**
>
> We began Trifecta because we believe there are three fundamental areas of health—mind, body, and social. These areas are interdependent, meaning you cannot thrive in one area without thriving in the others.

This is a webpage titled “Our Story Clone”

Any help would be greatly appreciated!

---

<div class="post-metadata">

**Author:** ![DaniellePeters](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/daniellepeters/32/6115_2.png) [@DaniellePeters](https://community.hubspot.com/u/DaniellePeters)\
**Post date:** [March 1, 2017, 2:40pm UTC](https://community.hubspot.com/t/custom-team-module-layout-breaking/1176/2 "2017-03-01T14:40:03Z")

</div>

This issue is due to this line of code which is clearing the float of the second to last team member module:

```auto
.custom-story-row-four-flexi .hs_cos_wrapper_type_custom_widget:nth-last-child(2) .team-custom-module-wrapper {
 clear: both;
}

```

If those modules are always going to be in a three column layout, I recommed instead something like this:

```auto
.custom-story-row-four-flexi .hs_cos_wrapper_type_custom_widget:nth-child(3n+1) .team-custom-module-wrapper {
 clear: both;
}

```

Although, you may be able to comment out that line of code entirely.

---

<div class="post-metadata">

**Author:** ![Trifecta](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trifecta/32/60590_2.png) [@Trifecta](https://community.hubspot.com/u/Trifecta)\
**Post date:** [March 1, 2017, 6:43pm UTC](https://community.hubspot.com/t/custom-team-module-layout-breaking/1176/3 "2017-03-01T18:43:22Z")

</div>

Thanks for you advice. It’s all looking proper now.

---

<div class="post-metadata">

**Author:** ![ndwilliams3](https://avatars.discourse-cdn.com/v4/letter/n/c4cdca/32.png) [@ndwilliams3](https://community.hubspot.com/u/ndwilliams3)\
**Post date:** [March 1, 2017, 2:43pm UTC](https://community.hubspot.com/t/custom-team-module-layout-breaking/1176/4 "2017-03-01T14:43:58Z")

</div>

```auto
.custom-story-row-four-flexi .hs_cos_wrapper_type_custom_widget:nth-last-child(2) .team-custom-module-wrapper {
 clear: both;
}

```

this line of css is breaking the layout. remove it from your stylesheet.