Boxed Page

You can use the max-width property like so

#container {
  max-width: 1120px;
}

and of course you can change 1120px to any pixel of your choice

i did that but the content got narrower but the blue still goes across the screen. i want the background to show on the sides
}
.container {
max-width: 1000px;
width: 70%;
margin: 0 auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

<!--container div tag-->
<div id="container">
  <!--sidebar div tag-->
  <div id="sidebar">
    <h3>Sidebar Content</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
  </div>
  <!--mainContent div tag-->
  <div id="mainContent">
    <h1>Main Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis
      luctus rutrum.</p>
    <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis.
      Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
    <h2>H2 level heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis
      luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.</p>
  </div>
</div>

Try this mate!!!

Thank you brazillions for your help but I can’t seem to get this right.

I am a noob.

I tried pasting into custom css, didnt work.

tried pasting it into the editor code and still nothing.

I will look for another theme to edit