如何使HTML页面更窄？

我想改变我展示物品的区域（身体）的宽度，我添加图片以便更好地理解我要寻找的东西：

（黄色标记是我要查找的HTML正文的宽度，我如何才能做到这一点？

我正在使用MVC4W/引导

其他信息：我有一个导航栏，要求我在“\u布局”中添加样式配置，以便以正确的方式显示页面，并且不允许导航栏覆盖正文内容，如下所示：

 <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>

我需要做哪些更改才能保持适用于所有类型的浏览器和屏幕

---

我改变了所有这些（1200px，992px，768px），就像我发布的代码一样，我如何知道我正在使用哪一个？因此我的媒体宽度是多少？

无需修改CSS，jsut将页面内容放在

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

如果您想使宽度更窄，可以使用：

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

---

创建一个新的div，就在body标签之后，将所有内容放入其中，给出宽度（例如1200px）和边距：0 auto；以使其保持在屏幕中央

---

如果您使用引导，请将所有内容都放在“容器”中。

如果我正确阅读了您的帖子，我认为您试图使内容更窄，保持导航栏的全宽……然后我建议更改以下内容

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

如果要使导航栏与内容的宽度相同，请在内容div中添加

#navbar

div，如下所示：

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

导航栏的代码
内容

…您是否尝试过

正文{宽度：80%；边距：0自动；}

？@TylerH是的，它只是将我的内容移动了一点，而没有移动正文的大小。然后可能是

宽度：50%；

或其他一些值，直到你得到你想要的。或者在容器div而不是正文上设置这些属性。我已经在“\u布局”中配置了这些属性，这是代码：@if（IsSectionDefined（“featured”）{@RenderSection（“featured”，required:false）}@RenderBody（）创建一个新的div，样式为style=“width:30%”它只会让我的内容向左移动一点，但不会变小，我不知道这是为什么。

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

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

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