Site Content / Wrapper Adjustment

https://puu.sh/gJg7z/7670953165.jpg

^Here’s an image of my website atm.

What I’m trying to do is get rid of the grey sidebar thingys attached to my site content/wrapper. It makes my site look super uneven especially when I minimize the site to under 100% it starts looking all stupid and it’s really frustrating. Here is the custom CSS I’ve added that adjusts the margins for it,

html.boxed body {
margin: 5em 17em !important;
-webkit-transition: margin 0.3s ease-in-out !important;
-moz-transition: margin 0.3s ease-in-out !important;
-o-transition: margin 0.3s ease-in-out !important;
-transition: margin 0.3s ease-in-out !important;
}

As you can see, my site is wrapped around a “site content” which I checked off in the wordpress admin section. I’ve been adding custom CSS to my mystile theme, but whenever I edit the “margin” part in the code nothing helps me make the outlined part disappear. I’ve been playing around with it, but I’m TOTALLY NEW AT THIS AND NOTHING WORKS. Someone help please. ??

edit:

Just wanted to add how it looked like when I zoomed out.

https://puu.sh/gJgle/0e728b5fe7.jpg <- Image