# Landing Page Head markup using flex - extra margin **URL:** \ **Category:** Blog, Website & Page Publishing\ **Tags:** how-to, enterprise, landing-pages\ **Created:** [September 29, 2021, 4:46pm UTC](https://community.hubspot.com/t/landing-page-head-markup-using-flex-extra-margin/44564 "2021-09-29T16:46:34Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![mkarsten](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mkarsten/32/70521_2.png) [@mkarsten](https://community.hubspot.com/u/mkarsten)\ **Post date:** [September 29, 2021, 4:46pm UTC](https://community.hubspot.com/t/landing-page-head-markup-using-flex-extra-margin/44564/1 "2021-09-29T16:46:34Z")
At some point last year I followed instructions I found somewhere to add fluid rows to my landing page template modules and head mark-up in the template is using flex. Essentially it keeps all the modules in a row the same height. Because of time constraints, we left the extra margin on the right-side of the module that throws spacing off. I cloned the original archived page ([https://info.pitsco.com/2020-christmas-card-contest?hs\_preview=uZMqfpgT-36526387845](https://info.pitsco.com/2020-christmas-card-contest?hs_preview=uZMqfpgT-36526387845)), and am trying to make some improvements, but I can’t seem to get rid of the extra margin, which is more obvious because I added rounded corners. I’ve tried several things, but no matter if I adjust coding in the head mark-up, inline on the module, or inline in the landing page editor, I can’t figure out where the extra margin is coming from. I’m attaching a couple screen shots, following is the mark-up, and the work in progress page is [https://info.pitsco.com/2020-christmas-card-contest-0?hs\_preview=MewDnTtI-56294298662](https://info.pitsco.com/2020-christmas-card-contest-0?hs_preview=MewDnTtI-56294298662). ![Screen-Shot-2021-09-29-at-11.35.44-AM.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/3/1/312b7a0a5ed2737d9f3e78e165d0fcbd4e46c908.jpeg) Purple block on bottom-right shows the extra margin the best. ![Screen-Shot-2021-09-29-at-11.36.38-AM.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/6/764ae6d64d292b381b1755f7f66a5f2bbbae07bd.jpeg) Here’s how the template is currently setup for these two rows. .equal-heights \> .row-fluid-wrapper \> .row-fluid { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content; center; } Any ideas? I greatly appreciate anything anyone can throw my way! ---
**Author:** ![erod](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/erod/32/99705_2.png) [@erod](https://community.hubspot.com/u/erod)\ **Post date:** [October 2, 2021, 12:50am UTC](https://community.hubspot.com/t/landing-page-head-markup-using-flex-extra-margin/44564/2 "2021-10-02T00:50:00Z")
Not sure if this is what you’re asking but take a look here: [2021-10-01\_17-38-00 - TechSmith Screencast](https://www.screencast.com/t/sVfriPQeMcAA) Once you remove the Margin: 0!important; from the inline style it should fix it: [2021-10-01\_17-40-27 - TechSmith Screencast](https://www.screencast.com/t/JObM6IoL3) What happened is you have 2 spans lined up side-by-side called “Span6.” Each span6 is set to a width of 48.7%. If you multiply that by two you get 97.4%. This means there’s an extra 2.6% of extra space (100%-97.4%). This extra space was being used as a margin between the two spans. When you set the margin to “0px!important;” you got rid of that margin, which pushed the span to the left and that’s show you got the extra margin on the right. ---
**Author:** ![mkarsten](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mkarsten/32/70521_2.png) [@mkarsten](https://community.hubspot.com/u/mkarsten)\ **Post date:** [October 4, 2021, 2:26pm UTC](https://community.hubspot.com/t/landing-page-head-markup-using-flex-extra-margin/44564/3 "2021-10-04T14:26:17Z")
@erod - Thanks for the insight, and that would work, if the design called for a margin between the two modules. I’m still tweaking the original design, but for the first row I’m applying this to, I have a lavendar color block on the left, and a whitecolor block on the right with a background (paper texture) for the whole page. So, the color blocks need to butt up against each other. Side note: I did something that’s thrown the row height off on the white side of both rows now (not equal to lavendar side), working on correcting that too, but I only have a few minutes here and there to work on this page. ---
**Author:** ![mkarsten](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mkarsten/32/70521_2.png) [@mkarsten](https://community.hubspot.com/u/mkarsten)\ **Post date:** [October 4, 2021, 2:37pm UTC](https://community.hubspot.com/t/landing-page-head-markup-using-flex-extra-margin/44564/4 "2021-10-04T14:37:45Z")
I had a thought after I submitting the reply. These two modules are in a group, because originally I had a stroke around them. I added margin: 0px 1.3%; to the group, which gained the space I needed to get this centered. I’m ok with the indent, but am thinking I could adjust the other modules/groups above and below to match, since it’s a relatively small adjustment, if I needed it to be flush with everything. Thanks for the help! Now, just to figure out what I did that the row height isn’t equal anymore.☹