Landing Page Head markup using flex - extra margin

[mkarsten]

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), 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.Purple block on bottom-right shows the extra margin the best.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!

[mkarsten]

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.:(

[mkarsten]

@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.

[erod · Accepted solution]

Not sure if this is what you're asking but take a look here: https://www.screencast.com/t/sVfriPQeMcAA

Once you remove the Margin: 0!important; from the inline style it should fix it: 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.