Hoi Rvdzande,

1. In general SPPB 4, is not supported anymore. Please install SPPB 5.0.7 Pro. It has back-end editor that should be easier to manage layout.
2. Instead of spending 12h, you could hire a expert for 1h that could finish it ;p
3. But seriously, In your case you do NOT need template boxed layout, becuase you need visible "shadow box" only for component area. That already has container. On your place I would only add shadow effect (by Custom CSS) to component area #sp-main-body. Why? Bacuse if you have boxed layout component cannot be wider than the boxed area! It's like stacking blocks inside the box (or table top), remember playing Lego?

Ok, but will the update be risky? Will look into this first!

Edit: Seams this has worked, but need to get used to it first, thanks for now!

No risk. Becuase you don't edit any file.

You are welcome.

Well not entirely true, my mainpage got fcked up because margins were completly different, had to start over again because I couldn't switch colums, idk what happened. Rest went ok!

If the initial design assumptions were wrong, something always goes awry during a renovation. These are costs to be endured.

No one promised that a developer's job is always as simple as click-click. But you probably already know that ;p

Usefull tip! In SPPB Settings you can define Container Maximum Width.

Fixed:

Assigned a class to mainbody (mainbod)

Code:

mainbod {
    max-width: 100%;
    flex-basis: 100%;
    margin: auto;
    background: #fff;
    -webkit-box-shadow: 0 0 10px rgba(158,156,158,1);
        box-shadow: 0 0 10px rgba(158,156,158,1);

.body-innerwrapper {
 background-image: url("yourbackgroundthing.png");
background-repeat: no-repeat, no-repeat;
background-size: cover;
}