# Help centering & resizing a module

**URL:** <https://community.hubspot.com/t/help-centering-resizing-a-module/137334>\
**Category:** CMS Development\
**Tags:** enterprise\
**Created:** [August 1, 2025, 9:01pm UTC](https://community.hubspot.com/t/help-centering-resizing-a-module/137334 "2025-08-01T21:01:37Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![TaylorLioy](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@TaylorLioy](https://community.hubspot.com/u/TaylorLioy)\
**Post date:** [August 1, 2025, 9:01pm UTC](https://community.hubspot.com/t/help-centering-resizing-a-module/137334/1 "2025-08-01T21:01:37Z")

</div>

![Screen Shot 2025-08-01 at 5.04.54 PM.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/9/29c31d7a5854a8fb07c714baf78f67e36d5fdcc5.jpeg)  
This is the look I’m going for. The tabbed card is perfectly aligned to the width of the rest of the content below it in other rows.I have to edit the file of this “Tabbed card” module in the design manager in order to get it to be in line with the rest of the copy on [this webpage.](https://www.encoder.com/encoder.com/government-aerospace?hs_preview=uqmtWMsx-193211011638)

You’ll see at the top of the page where I’ve put a tabbed card section. I need it to be the same width as the rest of the content on the webpage, and I need it to be justified center.

Please help with a css snippet that I can paste into the design manager file. Thank you!

EDIT:

I found that by adding this following snippet, it centers the module and adds the padding to the left and right. But no matter what I try, I can’t get it to be the same width as the rest of the page content.

```lia-code-sample
.hs-tabs-wrapper {
 padding-left: 200px;
 padding-right: 200px;
}

```

---

<div class="post-metadata">

**Author:** ![Victor\_Becerra](https://avatars.discourse-cdn.com/v4/letter/v/87869e/32.png) [@Victor\_Becerra](https://community.hubspot.com/u/Victor_Becerra)\
**Post date:** [August 1, 2025, 9:50pm UTC](https://community.hubspot.com/t/help-centering-resizing-a-module/137334/2 "2025-08-01T21:50:52Z")

</div>

Hi @TaylorLioy  
Thank you for reaching out to the Community!  
I’d like to invite some community members who are subject matter experts to join this conversation.  
@BarryGrennan @SteveHTM @Anton - Would you be able to share any insights on this? Your expertise would be greatly appreciated.  
Best,  
Victor

---

<div class="post-metadata">

**Author:** ![FaramarKolivand](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/faramarkolivand/32/76210_2.png) [@FaramarKolivand](https://community.hubspot.com/u/FaramarKolivand)\
**Post date:** [August 2, 2025, 7:49pm UTC](https://community.hubspot.com/t/help-centering-resizing-a-module/137334/3 "2025-08-02T19:49:32Z")

</div>

You don’t really need to set padding-left and padding-right to 200px, that will break responsiveness on mobile devices (see attached screenshot).

 ![Capture.JPG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/6/26282d50a7884996a99d21450baf8ba6d447e652.jpeg)

Since you’re using Bootstrap, it’s better to avoid custom CSS for layout unless necessary. Instead, can you try updating the HTML of your tabbed card module by wrapping it in the following Bootstrap grid structure like below?

```lia-code-sample
<div class="container">
 <div class="row">
 <div class="col-sm-12">
 <div class="hs-tabs-wrapper">
 <!-- Your tab content goes here -->
 </div>
 </div>
 </div>
</div>

```

This makes sure your tabbed content follows the same grid structure as the rest of your page, maintaining consistent alignment and spacing across all screen sizes, including mobile.

---

<div class="post-metadata">

**Author:** ![TaylorLioy](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@TaylorLioy](https://community.hubspot.com/u/TaylorLioy)\
**Post date:** [August 5, 2025, 7:23pm UTC](https://community.hubspot.com/t/help-centering-resizing-a-module/137334/4 "2025-08-05T19:23:02Z")

</div>

This worked, thank you!!

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [August 2, 2025, 9:19pm UTC](https://community.hubspot.com/t/help-centering-resizing-a-module/137334/5 "2025-08-02T21:19:39Z")

</div>

Hey @TaylorLioy,

adding padding isn’t a good idea in this case as @FaramarKolivand mentioned.

But since it seems to be an AI generated answer, because of “…since you’re using Bootstrap…” which is only partially right because, Yes, HS is build upon Bootstrap - but it’s using a modified version which is baked into HS and not really accessible, it’s not possible to just simply add a classic bootstrap layout with container\>row\>col or modify it without creating a custom module or template(s), here’s a better (and easier) way.

As I’d say the module is placed within a full-width section, I’d first check if this is the case.

To check this, check following:

1. Click on the “tree” icon in the icon sidebar (the one below the “plus”)
2. Look for the right section
3. Click on the 3 dots of the section and select “edit”

 ![Bildschirmfoto 2025-08-02 um 22.56.28.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/3/23da6f550c44c6e5b3bfb3e27b2c556f046b98b8.png)

1. Open the “Alignment & Spacing” group and try the “Center content” option - without changing the value that will appear below.

 ![Bildschirmfoto 2025-08-02 um 22.58.17.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/6/4/64f9f9810b224cd4f4819df445d125b9a276e16c.png)

1. **Important** - do this for the mobile version as well (click the mobile icon in the top center below the page name)

If this shouldn’t help, then you have to dive into CSS.

Here’s the code I’d do:

```lia-code-sample
.hs-tabs-wrapper{
max-width:1140px;
margin:0 30px;
}

@media screen and (min-width:1024px){
 .hs-tabs-wrapper{
 margin:0 auto;
 }
}

```

Also - depending on your setup, I’d recommend to use HubL variables like

```lia-code-sample
.hs-tabs-wrapper{
max-width:{{ theme.advanced.container_width ~ "px" }};
margin:0 {{ theme.advanced.col_gutter / 2 ~ "px" }};
}

@media screen and (min-width:1024px){
 .hs-tabs-wrapper{
 margin:0 auto;
 }
}

```

^ those variables are just examples and might not work.

If your theme is based on something like the Boilerplate, you can find those variables most likely in the theme-override.css and you should place your code in this as well.

Let me know if one of those options worked

best,

Anton

---

<div class="post-metadata">

**Author:** ![FaramarKolivand](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/faramarkolivand/32/76210_2.png) [@FaramarKolivand](https://community.hubspot.com/u/FaramarKolivand)\
**Post date:** [August 2, 2025, 9:52pm UTC](https://community.hubspot.com/t/help-centering-resizing-a-module/137334/6 "2025-08-02T21:52:59Z")

</div>

I don’t use AI sir, and I am not really using the CMS feature of HubSpot for building web pages. I only inspected the web page in the post and noticed the other sections are wrapped with container \> row \> col- classes, that’s why I thought why not wrapping the tabbed section with the same Bootstrap grid classes, that’s all. But it’s good to know that HubSpot pages are built with Bootstrap.

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [August 4, 2025, 7:44am UTC](https://community.hubspot.com/t/help-centering-resizing-a-module/137334/7 "2025-08-04T07:44:10Z")

</div>

Hey @FaramarKolivand,

My bad. Thank you for clearifying.

It reads like an AI generated text as it has a few and the Ai tester I’m using to get a “second opinion” stated that it’s 100% likely Ai generated. Sorry for that

best,

Anton

---

<div class="post-metadata">

**Author:** ![kosalaindrasiri](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kosalaindrasiri/32/44349_2.png) [@kosalaindrasiri](https://community.hubspot.com/u/kosalaindrasiri)\
**Post date:** [August 4, 2025, 8:13am UTC](https://community.hubspot.com/t/help-centering-resizing-a-module/137334/8 "2025-08-04T08:13:50Z")

</div>

Hey @TaylorLioy,

In the scenario you described, you can center the module using the section editor, as @Anton explained clearly in his response.

Also, I usually apply the CSS style _margin-inline: auto;_ in similar situations to achieve horizontal centering.

Hope this helps!

Regards,

---

<div class="post-metadata">

**Author:** ![GRajput](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grajput/32/102020_2.png) [@GRajput](https://community.hubspot.com/u/GRajput)\
**Post date:** [August 4, 2025, 9:17am UTC](https://community.hubspot.com/t/help-centering-resizing-a-module/137334/9 "2025-08-04T09:17:43Z")

</div>

Hi @TaylorLioy

The padding you’ve added in the CSS—please remove that. Then, in your HTML code, add a **\<div\>** right after the **\<section\>** and give it the class name ‘container’. This should resolve the issue. We’ve already fixed it on our end and shared a screenshot as well, so you can refer to that. Also, we shared the **screenshot** of the right HTML code.

 ![GRajput_2-1754298956325.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/c/c25072e9578b859d8a98f7865ba238685489dde1.png)

Even after applying the solution for the tab section, we noticed there are still **alignment issues**.

 ![GRajput_0-1754298858177.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/a/fa9c0fe64fde51eb001ea959c4aa0cba7bd292ab.jpeg)

On checking further, we found that another section has **some extra padding**

 ![GRajput_1-1754298902408.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/d/bdcfeec773cdd5acbacc7f05f1b1a32e545e3c16.png)

in the CSS, which isn’t applied to the tab module. If you want consistent alignment across all sections, please refer to the CSS screenshot we shared and **remove the padding styles** from it.

 ![GRajput_3-1754299029107.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/4/8/4859f77f98cc04122ef43c37d4af2b96d22a361f.png)

I hope this will help you out. Please mark it as **Solution Accepted and upvote** to help another Community member.

Thanks!