在机身顶部添加填充并不能解决导航栏覆盖内容的问题

Question

下面是我正在创建的投资组合网站的HTML和CSS代码。我的问题是，当我将我的徽标添加到导航栏时（这增加了导航栏的宽度），内容开始覆盖每个主播内容的顶部。例如，当我点击"关于"锚点时，它将转到该部分，但该部分的顶部被导航栏增加的宽度覆盖。我遵循了Bootstraps文档中的说明，以及stackoverflow上的其他说明，即在body元素的顶部添加padding或margin，但它不起作用。有人能看看我的代码，告诉我我是否做错了什么吗？

它应该是什么样子：https://www.script-tutorials.com/demos/391/index.html#services

我的是什么样子的：https://bootstrap-parallax.herokuapp.com/#services

HTML:

        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand-centered" href="#">
                <img src="img/logo2.png" alt="" />
              </a>
            </div>
            <div class="collapse navbar-collapse" id="navbar-collapse-main">
              <ul class="nav navbar-nav navbar-left">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
              </ul>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#information">Resume</a></li>
                <li><a href="#map">Contact</a></li>
                <li><a href="https://www.script-tutorials.com/bootstrap-one-page-template-with-parallax-effect/">Blog</a></li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>

CSS：

/*this changed a heading text color to white*/
.h1, h1 {
  color: white;
}
/*this changed another heading text color to white*/
.h3, h3 {
  color: white;
}
/*this vertically centered the navbar links after the logo made navbar too wide*/
.navbar-nav li a {
  line-height: 35px;
  padding-left: 20px;
  padding-right: 20px;
  font-weight: bold;
  font-size: medium;
}
/*this centers the logo on the navbar*/
@media screen and (min-width:768px){
    .navbar-brand-centered {
        position: absolute;
        left: 50%;
        display: block;
        width: 160px;
        text-align: center;
    }
    .navbar>.container .navbar-brand-centered, 
    .navbar>.container-fluid .navbar-brand-centered {
        margin-left: -160px;
    }
}
/*this pushed the left navbar links to the right */
.navbar-left {
  padding-left: 75px;
}
/*this pushed the right navbar links to the left*/
.navbar-right {
  padding-right: 75px;
}
/* general styles */
html, body {
  height: 100%;
  width: 100%;
}
/* padded section */
.pad-section {
  padding: 50px 0;
}
.pad-section img {
  width: 100%;
}
/* vertical-centered text */
.text-vcenter {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.text-vcenter h1 {
  font-size: 4.5em;
  font-weight: 700;
  margin: 0;
  padding: 0;
}
/* additional sections */
#home {
  background: url(../img/Slide2.jpg) no-repeat center center fixed; 
  display: table;
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#about {
}
#services {
  background-color: #306d9f;
  color: #ffffff;
}
#services .glyphicon {
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  display: inline-block;
  font-size: 60px;
  height: 140px;
  line-height: 140px;
  text-align: center;
  vertical-align: middle;
  width: 140px;
}
#information {
  background: url(../img/Slide.jpg) no-repeat center center fixed; 
  display: table;
  height: 800px;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#information .panel {
  opacity: 0.85;
}
#map {
  /*width: 500px;*/
  height: 500px;
}
footer {
  padding: 20px 0;
}
footer .glyphicon {
  color: #333333;
  font-size: 60px;
}
footer .glyphicon:hover {
  color: #306d9f;
}
body {
  padding-top: 65px;
}

Answer 1

由于导航栏的宽度现在增加了，我们还必须增加div的填充以保持视图的完整性。

.pad-section { padding: 100px 0; }

对于特定的div填充，原始模板具有特定的导航栏高度。由于您更改了导航栏，您必须更改div填充以及

br技巧
虽然这不是最好的选择，但有时它有助于作为死胡同备份

而不是将br放在about部分之前。这样说吧。

<div id="about" class="pad-section">
          <div class="container">
            <br><br><br>
<div class="row">
              <div class="col-sm-6">
                <img src="img/logo.png" alt="">

Answer 2

Tipically在bootstrap中是页面的容器，它定义了正确的填充，因此不会被导航栏遮蔽。。而你正在看着纳瓦巴。。看看导航基地下面的集装箱，这可能像这个

.包装>.容器

.wrap > .container-fluid
{
   padding: 45px 15px 20px;
} 

45px的填充与导航栏的8有关，所以。。根据您的需要调整