Full-width Rows Affecting Margin & Spacing

Hello Community!

Theme: i-Amaze (Live demo)

Initially, my rows were set to full-width in Beaver Builder options, but looked cut off (due to using BB with a 3rd party theme); so to compensate, I wrote a bit of extra code with the help of BB’s knowledge base to make the rows full-width:

`.fl-builder #main {
padding: 0 !important;
margin: 0 !important;
max-width: none;
width: auto !important;
}

body .content-area {
padding: 0;
}`

The code above only works when applied globally; it doesn’t work when applied to a single page.
Now, the good news is the row’s content stays fixed while the background extends from edge to edge, but the bad news is the margins and spacing on the other pages are all dispositioned (Reference). As one can see, the header and footer is cut off. The margins and padding are are set to zero, so no doubt this is another CSS issue.

I started CSS 1A at my community college this quarter, so needless to say, I’m still a newbie. If anybody could point me in the right direction and assist me in reaching a solution, I would really appreciate it.

Thanks!

The page I need help with: [log in to see the link]