css Background image to be boxed white not fullwid

Question

God Another Question regarding css the test site again was http://testpress.dramend.com/amend-2/, I currently have this main content as a fullwidth with white background:

But what I want to achieve was this kind of boxed layout with the same white background but it needs to be boxed like this sample:

I'm using wordpress optimized press latest versiom, it doesnt have any options of changing a section to boxed or fullwidth, There's an option to changed the background to an image but it would look like this once I've set it to the my background image:

Can I achieved the boxed layout on the second image just using plain css for the main content background?

HTML

//main container    
<div style="background:#ffffff; class="row one-column cf ui-sortable" id="le_body_row_4" >
   <div class="fixed-width">
      <div class="one-column column cols" id="le_body_row_4_col_1">
       // image html comes here
       .. some more html
      </div>
   </div>
</div>

Thanks

Answer 1

You can do it through css but the problem is whatever module you are using is adding inline style to it,for example

your container with class row one-column cf ui-sortable and id le_body_row_4 has inline style like this

background:#ffffff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff),

Inline style is given preference over css file styles, if you can remove the inline style and add css to these classes one-column column cols

.one-column .column cols { background: #fff }

It will solve your problem

Answer 2

First of all you are using table so by default, table will take entire horizontal space, so make your container a fixed width and assign margin: auto; to that

.container {
   margin: auto;
   overflow: hidden;
   padding: 0;
   position: relative;
   width: 1000px;
}

and than use background-color: #fff; on div having id of #le_body_row_4