How Can I Make The HTML Page More Narrow? - html

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>