Css 表单向上移动并与导航栏重叠

我的表单正在向上移动，并在较小的屏幕和桌面屏幕上与导航栏重叠。我可以；我好像没弄明白。下面是html和css

HTML

<div class="container-fluid h-100 d-flex flex-column">
        <nav class="navbar navbar-light fixed-top">
    <a class="navbar-brand" href="#">
      <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
    </a>
    <ul class="nav justify-content-end">
      <li class="nav-item">
        <a class="nav-link active" href="#">Updates</a>
      </li>
    </ul>
  </nav>
  <div class="row align-items-center flex-grow-1">
      <div class="col-6 mx-auto">
          <div class="custom-form mb-0">
             <form action="">
          <fieldset class="form-group">
            <label for="first_name">Name</label>
            <input type="text" class="form-control" id="name" name="name">
          </fieldset>
          <fieldset class="form-group">
            <label for="last_name">Email</label>
            <input type="text" class="form-control" id="email" name="email">
            <button type="submit" class="btn btn-submit">Subscribe</button>    
          </fieldset>                                                 
        </form>
          </div>
      </div>
  </div>

   <footer class="mt-auto">
    <p class="float-left">2018 © Palungo</p>
      <div class="float-right">
        <ul class="list-inline">
          <li class="list-inline-item"><a href="#">News</a></li>
          <li class="list-inline-item"><a href="#">Coles</a></li>
        </ul>
      </div>
  </footer>

</div>

这是我这期的截图： 我想知道是否有更好的方法来实现这一目标：

我还包括codepen.io链接。希望能有帮助

---

您可以将一个类添加到包含所有表单标记的div元素中，然后在CSS中添加一个边距顶部选择器（具有一定间距）将其向下推，如下所示：

body，
html{
身高：100%；
背景：#333A4D；
}
.MAIN-FORM{
保证金上限：10雷姆；
}
navbar先生{
填充：10px；
背景#F3B0B6；
}
.导航链路{
字体大小：25px；
线高：32px；
颜色：#F3B0B6；
}
.导航项目{
左边距：1 em；
}
.列出内联项{
左边距：1 em；
}
琼伯伦先生{
背景：无；
}
.文本边框{
显示：块；
高度：1px；
边界：0；
边框顶部：4px实心#F3B0B6；
}
.铅{
文本转换：大写；
颜色：#F3B0B6；
字体大小：25px；
线高：31px；
}
.自定义表单容器{
边缘顶部：5雷姆；
}
.定制表格{
背景：绿色；
填充：60px 82px 60px 82px；
边界半径：10px；
-网络工具包盒阴影：0px 3px 6px-4px 000000；
盒影：0px 3px 6px-4px 000000；
}
.自定义表单标签{
字体大小：25px；
线高：32px；
颜色：#F3B0B6；
左边距：1 em；
}
.customform.btn{
浮动：对；
边缘顶部：3rem；
保证金权利：-3rem；
字体大小：25px；
线高：32px；
颜色：#F3B0B6；
背景：无；
}
.自定义窗体.窗体控件{
高度：40px；
边框：1px实心rgba（0,0,0,0.15）；
背景：rgba（0,0,0,0.1）；
}

名称
电子邮件
订阅
2018年©帕隆戈

首先使用边距顶部选择器向下推动div

body，html{
身高：100%；
背景：#333A4D；
}
navbar先生{
填充：10px；
背景#F3B0B6；
高度：60px；
}
.row.align-items-center.flex-grow-1{
显示：块；
边缘顶部：60像素；
}
.导航链路{
字体大小：25px；
线高：32px；
颜色：#F3B0B6；
}
.nav项目{左边距：1rem；}
.list内联项{左边距：1rem；}
.jumbotron{背景：无；}
.文本边框{
显示：块；
高度：1px；
边界：0；
边框顶部：4px实心#F3B0B6；
}
.铅{
文本转换：大写；
颜色：#F3B0B6；
字体大小：25px；
线高：31px；
}
.自定义表单容器{页边距顶部：5rem；}
.定制表格{
背景：绿色；
填充：60px 82px 60px 82px；
边界半径：10px；
-网络工具包盒阴影：0px 3px 6px-4px 000000；
盒影：0px 3px 6px-4px 000000；
}
.自定义表单标签{
字体大小：25px；
线高：32px；
颜色：#F3B0B6；
左边距：1 em；
}
.customform.btn{
浮动：对；
边缘顶部：3rem；
保证金权利：-3rem；
字体大小：25px；
线高：32px；
颜色：#F3B0B6；
背景：无；
}
.自定义窗体.窗体控件{
高度：40px；
边框：1px实心rgba（0,0,0,0.15）；
背景：rgba（0,0,0,0.1）；
}

名称
电子邮件
订阅
2018年©帕隆戈

    body,html {
     height: 100%;
     background:#333A4D;
    }
  .navbar{
    padding: 10px;
    background: #F3B0B6;
  }
  .nav-link{
    font-size: 25px;
    line-height: 32px;
    color: #F3B0B6;
  }
  .nav-item { margin-left: 1rem; }
  .list-inline-item{ margin-left: 1rem; }
  .jumbotron{ background: none; }
  .text-border{
    display: block;
    height: 1px;
    border: 0;
    border-top: 4px solid #F3B0B6;
  }
  .lead{
    text-transform: uppercase;
    color: #F3B0B6;
    font-size: 25px;
    line-height: 31px;
  }
  .custom-form-container{margin-top: 5rem;}
  .custom-form{
      background: green;
      padding: 60px 82px 60px 82px;
      border-radius: 10px;
      -webkit-box-shadow: 0px 3px 6px -4px #000000; 
      box-shadow: 0px 3px 6px -4px #000000;
  }
    .custom-form label{
      font-size: 25px;
      line-height: 32px;
      color: #F3B0B6;
      margin-left: 1rem;
   }
  .custom-form .btn{
    float: right;
    margin-top: 3rem;
    margin-right: -3rem;
    font-size: 25px;
    line-height: 32px;
    color: #F3B0B6;
    background: none;
  }
  .custom-form .form-control{
    height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.1);
  }