Milind Soorya , still not a fix tho ;) Just try it, really. Unless you're NOT* using box-sizing: border-box , your max-width: 100% will be 100% - the padding on the parent, meaning, the effect "before" and "after" is gonna be exactly the same. I created a pen with your solution and mine underneath: https://codepen.io/Yzoja/pen/bGRvOjY Added the scroll to main to make sure it works just as well when the scroll is visible. *Not using box-sizing: border-box is fairly unsafe, because it means you have to count off every padding with elements set to 100% width. So, if you did it: don't.

Hm, I double checked your website, and it doesn't look like there is a padding on that newsletter div. Also, 100vw wouldn't work on desktop, as it counts 100vw with the scrollbar width. In case of padding your 100% would be width minus the padding. Try it ;) add padding to the main div you have there and check if your CSS still works - plot twist, it doesn't. CSS is weird and I give you that, just please please pretty please, double check your "tutorials" before spreading the tip, that's actually not working. Smarter solution for this kind of case is using negative margins and having width with calc(100% + 2x your margin) . Setting max width to 100vw would do the job on mobile devices tho, as there is no scroll space taken into an account when counting the viewport width.