Content Editor not “sticking”

Question

I've got a blank we-part page. What I would like to do is hide the side-bar and possibly some of the upper menus - to give us more real estate for a report that will be embedded on the page.

I've added a Content Editor webpart with the following code:

<style type="text/css">
     .ms-webpartPage-root {
         border-spacing: 0px !important;
     }
       .ms-webpartzone-cell {
         margin: 0px !important;
     }

     div#sideNavBox{display:none;}
     div#contentBox{margin:0 20px;}
</style>

When I press Apply the side-bar goes but then when I check the page in it reappears - then if I inspect the content editor the css has changed to the following:

<style>
.--root {
border-spacing:0px !important;
}

.--cell {
margin:0px !important;
}

 {
;
}

 {
margin:0 20px;
}
</style>

What is happening and how do I start going about hiding some of the menus ?

Any help appreciated, Jason

Answer 1

I tried to use your style in Script Editor Web part that gives me the desired result.

[Output]

After adding your style to Script Editor Web part then I checked in the page, everything works fine as shown below: