# Centering Flexible Columns within a module group **URL:** \ **Category:** CMS Development\ **Tags:** css\ **Created:** [November 5, 2021, 11:49am UTC](https://community.hubspot.com/t/centering-flexible-columns-within-a-module-group/46542 "2021-11-05T11:49:56Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![borkacer](https://avatars.discourse-cdn.com/v4/letter/b/9de0a6/32.png) [@borkacer](https://community.hubspot.com/u/borkacer)\ **Post date:** [November 5, 2021, 11:49am UTC](https://community.hubspot.com/t/centering-flexible-columns-within-a-module-group/46542/1 "2021-11-05T11:49:56Z")
Hi Community, I am having trouble vertically centering flexible columns within a module group. Here is how it looks now in CMS hub : ![borkacer_4-1636112944039.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/5/5/550e9277305c8ed9e21c5f4755bf79ad7b5714ea.jpeg) This is the layout in the Design manager: ![](https://d2qpr2jzcazej7.cloudfront.net/original/3X/4/8/48bba82937f219adb7a90db1deae86e6640c8758.png) Each flexible column has a **width: 15%** assigned in the “inline styling”. The columns are under a module group with a CSS class “ **.container-equal-columns** ”: ![](https://d2qpr2jzcazej7.cloudfront.net/original/3X/e/f/ef08aaf64e66838de76b9f6fea2efcfd1c390042.png) There is also another module group “ **5 columns** ” with a CSS class “ **.columns-service-page** ”: ![borkacer_3-1636112721132.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/6/760a57ee1e0cb54db8ab31526141fcec010be567.png) Can anybody help me to distribute those columns evenly and center vertically? I would like the width of the whole group module to stay 95% of the page and width of each flexible column 15%. Thank you ---
**Author:** ![Oezcan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/oezcan/32/53959_2.png) [@Oezcan](https://community.hubspot.com/u/Oezcan)\ **Post date:** [November 5, 2021, 12:36pm UTC](https://community.hubspot.com/t/centering-flexible-columns-within-a-module-group/46542/2 "2021-11-05T12:36:58Z")
Hi @borkacer , did you try display: flex and justify-content: center or justify-content: space-between/around/evenly for container-equal-columns? Maybe display: grid can also help. [Here](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) are one guide for display flex and [here](https://css-tricks.com/snippets/css/complete-guide-grid/) for display grid! Best regards, Özcan ---
**Author:** ![borkacer](https://avatars.discourse-cdn.com/v4/letter/b/9de0a6/32.png) [@borkacer](https://community.hubspot.com/u/borkacer)\ **Post date:** [November 5, 2021, 12:45pm UTC](https://community.hubspot.com/t/centering-flexible-columns-within-a-module-group/46542/3 "2021-11-05T12:45:36Z")
Hey @Oezcan , I have tried all of that, in different combinations as well 😀 and with “margin: 0 auto !important” and still nothing. All the columns are still aligned to the left ---
**Author:** ![Teun](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/teun/32/28739_2.png) [@Teun](https://community.hubspot.com/u/Teun)\ **Post date:** [November 5, 2021, 1:04pm UTC](https://community.hubspot.com/t/centering-flexible-columns-within-a-module-group/46542/4 "2021-11-05T13:04:38Z")
Hi @borkacer , Can you share the page? Might be able to help out! ---
**Author:** ![Oezcan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/oezcan/32/53959_2.png) [@Oezcan](https://community.hubspot.com/u/Oezcan)\ **Post date:** [November 5, 2021, 1:12pm UTC](https://community.hubspot.com/t/centering-flexible-columns-within-a-module-group/46542/5 "2021-11-05T13:12:24Z")
Hey @borkacer , i tried with .container-equal-columns { margin: 0 auto; } .container-equal-columns .row-fluid { display: flex; justify-content: center } ![Oezcan_0-1636117825845.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/8/8/8896fdcaf40d00c9b661124705c9e28dd16369cc.png) ![Oezcan_1-1636117881071.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/3/03f033fbf90db57c2f6de6a30b61f8718f3ae4a8.png) Maybe it will work that way for you too best regards, Özcan ---
**Author:** ![Oezcan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/oezcan/32/53959_2.png) [@Oezcan](https://community.hubspot.com/u/Oezcan)\ **Post date:** [November 5, 2021, 1:47pm UTC](https://community.hubspot.com/t/centering-flexible-columns-within-a-module-group/46542/6 "2021-11-05T13:47:40Z")
Hey @borkacer , i tried another variant and i’m more satisfied with it: .container-equal-columns { width: 80% !important; } and your .row-fluid: .row-fluid { display: flex; justify-content: center; } ![Oezcan_0-1636120141416.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/5/e/5e71fd195abe2bd5986d10823c69987e8055186b.png) please excuse my other solution beforehand if it did not help. best regards Özcan ---
**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\ **Post date:** [November 8, 2021, 12:25pm UTC](https://community.hubspot.com/t/centering-flexible-columns-within-a-module-group/46542/7 "2021-11-08T12:25:16Z")
Hi @borkacer , Please try this CSS: if not shareme LIVE Url i will check and send you code .container-equal-columns .row-fluid { display: flex; justify-content: center } .columns-service-page{ display: flex; justify-content: center } Hope this helps! If we were able to answer your query, kindly help the community by marking it as a solution. Thanks and Regards. ---
**Author:** ![Oezcan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/oezcan/32/53959_2.png) [@Oezcan](https://community.hubspot.com/u/Oezcan)\ **Post date:** [November 22, 2021, 9:56pm UTC](https://community.hubspot.com/t/centering-flexible-columns-within-a-module-group/46542/8 "2021-11-22T21:56:53Z")
Hello @borkacer , did my suggestion help you? Were you able to center the modules? If not here is another solution: ```lia-code-sample .container-equal-columns .row-fluid { width: 95%; margin: 0 auto; } ``` Please let me know if we can help you. Best regards, Özcan