How Can I Make The HTML Page More Narrow?

Question

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:

(the yellow mark is the width that i'm looking for to my HTML body, How can i do it ?

I'm using MVC 4 w/ bootstrap.

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:

 <style>
        body {
            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */

        }

        .aligntobottom {
            bottom: 0;
            position: absolute;
        }
    </style>

What i need to add to the style markup in order to get what i want?

Update This is how i render the body (in the '_layout'):

 <div class="container">


            @if (IsSectionDefined("featured"))
            {
                <div class="hero-unit">
                    @RenderSection("featured", required: false)
                </div>
            }
            @RenderBody()


    </div> <!-- /container -->

So its inside a container at the first place.(i render the body into the container)

update

**I notice that the problem is because the '@media' :

But now i see that i have a couple of @media section in my CSS:

@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*/
  }

what i need to change in order to keep the suitability for all type of browser and screens ??

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?

Answer 1

If I read your post correctly, I think you're trying to make the content narrower keeping the nav bar to the full width.... then I suggest changing the following

<div id="navbar">
  code of the navigation bar
</div>
<div id="content" >
  content
</div>

and then change the stile to look like this

#navbar{
  width:100%;
  /*other styles*/
}
#content{
  width:920px;/*change the value to suite ur need*/
  margin:0 auto;/*this will center ur content*/
}

If you want to make the nav bar the same width as the content then add the #navbar div inside the content div as follows:

<div id="content">
  <div id="navbar">
    code of the navigation bar
  </div>
  content
</div> 

Answer 2

create a new div, just after the body tag, put everything inside it, give width (eg 1200px) and margin:0 auto; to keep it at the center of the screen.

if you are using bootstrap, put everything inside of "container".

Answer 3

There's no need to modify the CSS, jsut put the content of your page inside a

<div class="container">
    <!-- More HTML here -->
</div>

If you want to make is narrower you could use:

<div class="container">
     <div class="row">
         <div class="col-lg-offset-1 col-lg-10">
         </div>
     </div>
</div>