CSS background overlay color issue with padding

Question

I would like to ask a small help because I can not handle with overlay a div with background. In my website there are welcome section which is 100% width and 100% height, it has a background image which is covered a small texture pattern and rgba color. It works correct but I have a problem with other section which can not be covered by overlay.

The problem is with "CTA section" because it use padding (top and bottom). Unfortunately, the whole background of this section is not covered and generally I do not know how I can fix it very simple. I would not use const height property because I want to create something which will match to content of section (all content in this section should be centered vertical and horizontal and also works in smaller devices, so padding is fine).

Well, I am wondering if you could help me with it because I really do not know how to code it or even rebuild it.

Here you can see a demo: http://codepen.io/testerius/pen/viryc

That's all. Hope you answer soon.

Answer 1

If I understand you correctly you need to change the CSS for the CTA section to what I updated your codepen to here >> DEMO

Let me know if that is what you need.

Answer 2

Try use same padding for .section-pattern-overlay and remove padding from .cta