html - 向正文顶部添加填充并不能解决导航栏覆盖内容的问题

Question

下面是我正在创建的投资组合网站的 HTML 和 CSS 代码。我的问题是，当我将 Logo 添加到导航栏(这增加了导航栏的宽度)时，内容开始覆盖每个 anchor 内容的顶部。例如，当我单击“关于” anchor 时，它将转到该部分，但该部分的顶部被导航栏增加的宽度覆盖。我遵循了 Bootstraps 文档以及 stackoverflow 上的其他说明，这些说明向 body 元素的顶部添加填充或边距，但它不起作用。有人可以查看我的代码并告诉我是否做错了什么吗？

它应该是这样的: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 的填充以保持 View 完整。

.pad-section { 填充: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="">