Html 助推器填充问题

我正在尝试添加填充到我的引导网站。但是，当我调整浏览器的大小时，导航栏会完全混乱，而不是保持固定。这里有一个图片链接

html代码：

<nav class="nav`bar navbar-custom">
<div class="container2">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">logo</a>
  </div>
  <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">WHO</a></li>
      <li><a href="#">WHAT</a></li>
      <li><a href="#">WHERE</a></li>
    </ul>
  </div>
</div>

---

我发现你的代码格式有一些问题，但我知道了。您最需要的是添加到导航栏的类

导航栏固定顶部

，以便它始终位于顶部。我还建议创建自定义类，而不是完全重写

容器

类。最好是

container自定义容器

——这样它仍然可以获得基本功能和您的更改。我还看到您正在使用未定义的类

container2

，因此不能作为容器使用

HTML

---

但是

直接位于

下。所以，它会弄乱你的容器。Michael Cooker为您指明了一个好的方向。

因为您的导航栏是静态的，所以填充也会影响导航栏。无法判断，因为这个问题中没有CSS。通过设置

填充：0，尝试从
.navbar custom
重置填充或
填充：0！重要信息
填充的意义是什么？您可能应该将其应用于外部容器，而不是将其应用于主体。你不想在手机上有400px的空间。。。这比大多数手机的视窗宽度还要宽。因此，您可以根据您的布局，在最合适的位置使用媒体查询删除填充。嗨，我不希望我的文本位于网页的末尾，我希望它的大小在200px左右
    `body{
  padding-left: 200px;
  padding-right: 200px;
}
.navbar-custom {
    background-color:transparent;
    color:#000;
    border-radius:0;
    padding-top: 50px;

}

.navbar-custom .navbar-nav > li > a {
    color:#000;
}

.navbar-custom .navbar-nav > .active > a {
    color: #000;
    background-color:transparent;
}

.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus,
.navbar-custom .navbar-nav > .open >a {
    text-decoration: none;
    background-color: #ff0000;
}

.navbar-custom .navbar-brand {
    color:#eeeeee;
}
.navbar-custom .navbar-toggle {
    background-color:#eeeeee;
}
.navbar-custom .icon-bar {
    background-color:#33aa33;
}


.container {
    padding-top: 70px;
    padding-bottom: 70px;
    font-family: 'Bree Serif', serif;
    font-size: 20em;

  }

  .footer-right{
      padding-top: 70px;

      font-family: 'Bree Serif', serif;

    }`

<nav class="navbar navbar-custom navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
<div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">WHO</a></li>
      <li><a href="#">WHAT</a></li>
      <li><a href="#">WHERE</a></li>
    </ul>
  </div>
  </div>
</nav>

<div class="container custom-container">

  <div class="text-center">
    <h1>Bootstrap starter template</h1>
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>

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

body{
  padding-top: 100px;
  padding-left: 200px;
  padding-right: 200px;
}

.navbar-custom {
    background-color:transparent;
    color:#000;
    border-radius:0;
    padding-top: 50px;

}

.navbar-custom .navbar-nav > li > a {
    color:#000;
}

.navbar-custom .navbar-nav > .active > a {
    color: #000;
    background-color:transparent;
}

.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus,
.navbar-custom .navbar-nav > .open >a {
    text-decoration: none;
    background-color: #ff0000;
}

.navbar-custom .navbar-brand {
    color:#eeeeee;
}
.navbar-custom .navbar-toggle {
    background-color:#eeeeee;
}
.navbar-custom .icon-bar {
    background-color:#33aa33;
}


.container-custom {
    padding-top: 70px;
    padding-bottom: 70px;
    font-family: 'Bree Serif', serif;
    font-size: 2em;

  }