title: How Can I Make The HTML Page More Narrow?
body: <p>I want to change the width of the area that i present things (the body), i add picture for better understanding of what i'm looking for:</p>
  
  <p>(the yellow mark is the width that i'm looking for to my HTML body, How can i do it ?
  <img src="https://i.stack.imgur.com/iAOcd.jpg" alt="enter image description here"></p>
  
  <p>I'm using MVC 4 w/ bootstrap.</p>
  
  <p>Additional info: I have a navbar that require from me to add style configures in the '_layout' in order to display the page in a proper way and not to allow the navbar to be over the body content, here is it:</p>
  
  <pre><code> &lt;style&gt;
          body {
              padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
  
          }
  
          .aligntobottom {
              bottom: 0;
              position: absolute;
          }
      &lt;/style&gt;
  </code></pre>
  
  <p>What i need to add to the style markup in order to get what i want?</p>
  
  <p><strong>Update</strong> This is how i render the body (in the '_layout'):</p>
  
  <pre><code> &lt;div class="container"&gt;
  
  
              @if (IsSectionDefined("featured"))
              {
                  &lt;div class="hero-unit"&gt;
                      @RenderSection("featured", required: false)
                  &lt;/div&gt;
              }
              @RenderBody()
  
  
      &lt;/div&gt; &lt;!-- /container --&gt;
  </code></pre>
  
  <p>So its inside a container at the first place.(i render the body into the container) </p>
  
  <p><strong>update</strong></p>
  
  <p>**I notice that the problem is because the '@media' :</p>
  
  <p>But now i see that i have a couple of @media section in my CSS:</p>
  
  <pre><code>@media (min-width: 768px) {
    .container {
        width: 550px;
      /*width: 750px;*/
      /*MAYBE THIS*/
    }
  
  @media (min-width: 992px) {
    .container {
        width: 550px;
      /*width: 970px;*/
      /*MAYBE THIS*/
    }
  
  @media (min-width: 1200px) {
    .container {
      /*width: 1170px;*/
      width: 550px;
      /*MAYBE THIS*/
    }
  </code></pre>
  
  <p>what i need to change in order to keep the suitability for all type of browser and screens ??</p>
  
  <p>I change all of them(1200px, 992px, 768px) like the code i post, how can i know which one i'm currently using ? hence what my media width?</p>