Extra padding rendered to divs and is messing with the width

[navethegreat]

Hello.

So I was trying to create a page on Hubspot that I had already created on my website (and it looks perfect on my website) and for some reason the padding is getting rendered weirdly. I have two divs that are both 50% (one with padding), and when I inspect the DOM, I see that if I turn off the padding that it's affecting the width. Why is this?

Here is the test page: https://info.scorpion.co/test-law-webinar

I am looking specifically at the second section with the ID=WebinarSignUp and the div with the class of "content-container".

It has a width of 50% (and so does it sibling with a class of "webinar"), but it also has padding. When I turn off the padding it fits like it should.

I have developed this as a custom template (not a premade HS template). Is there some behind-the-scenes rendering happening that HS has? And if so how do I disable it?

Edit:

to anyone reading this and if you're having a similar problem, I just want you to know that my code was fine and I ended up just needing to ignore my problem for a little bit in one of those unique times where actually ignoring your problem will solve it.

It could have been caching, because my code was working fine on my other website, or who knows. Try clearing your cache or just coming back to it after a while...much like one would do in any development situation when you're really stuck on something. Take a break and work on something else to get your mind off of it. Then come back with a fresh mind and a renewed sense to make your next moves.

[dennisedson · Accepted solution]

hey @navethegreat ,

So there I was, starting to look at why flex wasn't being all flexy with your page.  I saw it not working.  I was looking in chrome.  I really don't like chrome dev tools so I switched to my preferred experience in firefox and BAM it was working as expected.  So I thought, what the heck is chrome not honoring that firefox is.  I beat my head for a minute and reload chrome and BAM it is also working.

I am going out on a limb and saying you solved your own issue.  If you did, could you do me a favor and post that answer here and mark it as solved.  That way others can learn?  

If I missed the boat and things are not resolved, feel free to yell at me and I will do what I can to help 

Thanks!

[navethegreat]

Sighhhh...I have no idea what I did. I don't think I really changed anything either. I did some updates to the form and some other minor changes on other sections...I hate it when this happens cause I am pretty okay dev and I know my code worked because it works on my website...what the heck universe!!!

I'm just going to write this off as one of those times where I just needed to put it down for a few hours (or days) and come back to it and not get frustrated.

Hey thank you so much for taking a look at my problem. Much love from dev to dev. Peace!

[dennisedson]

I would be lying if I didn't say the same thing has happened to me about 3.2million times

[navethegreat]

Hey Dennis, it started doing it again. Think you could take another look for me?

[dennisedson]

Well that is annoying.  

Could you try removing the padding from the .content-container div inside the flex container and then adding an additional wrapper div inside the .content-container div that has the padding?

[navethegreat]

interesting. so i tried this in the inspector and on desktop it worked perfectly, then i had to reverse everything I did on respopnsive because it was doing the same with adding this weird padding on responsive. i'll mess around with it a little more and see what I can come up with. thanks dennis

[dennisedson]

I should do some reading up on flex and padding to see if there is some quirk that I am unaware of.  Honestly, I would have believed that your initial code would have worked. 

If you could please post any solution you find here so the community at large has access to it, it would be greatly appreciated!

Now go enjoy the weekend!