I'm having trouble with basic layout using html/css with Sharepoint - html

Question

I'm new to Sharepoint, so I'm having difficulty with some basic stuff. I've already posted this to the SharePoint StackExchange, but I thought I'd try my luck here as well. Let me know if what I'm doing is wrong, and I will remove my post from here!
My end goal is to basically make something that looks like this.
You can see what my current page looks like on the first image of this link. On the second image of that link, you can see how the layout looks in Sharepoint. As you can see, it's just a bunch of content editor web parts with html/css in them. I apologize for making the image pretty zoomed out, but in case you can't see there is a header section, a top-left section, a right section, a center-left section, a center section, and a center-right section.
There are a few things I need to change to my current page to make it look like what I want.
I need to make the paragraph expand the width of the paragraph at the top (I want the width for the header section to reach all the way to the end of the last blue box on the right)
I'm having trouble fixing the Right section of the webpage. I needed to use a lot of margin-top on the first blue box in that section in order to line it up with the rest of the boxes. But, as you can see from the third image of the link, there is an issue when I zoom out, which makes me think that it will not look right on different sized screens.
Last, and the part I'm having most difficulty with, is changing the color of all of these boxes to white and then putting them inside a blue background. I'm trying to make it look that first link, where I have a heading with a paragraph, and then the boxes underneath that paragraph are all inside a blue background. I am not sure how to go about doing this considering that they are all in different web parts so I wouldn't really know how to put them all inside a container.
This is what the code looks like for the boxes if it could be of any help, it basically just looks something like this:
<!-- Large Box -->
<div class="largeBox"></div>
<!-- Small Boxes -->
<div class="box"></div>
<style>
.largeBox {
width: 800px;
height: 250px;
background: rgb(0, 122, 201);
}
.box {
width: 250px;
height: 250px;
background: rgb(0, 122, 201);
}
</style>
And that's pretty much it except for very slight margin-left and margin-right to align some of the boxes.
Sorry again if I'm asking for way too much, I'm just very new to Sharepoint and it's taking me a bit of time to get used to it. Any help would be very much appreciated.