Navigate to a div section on same page not working properly?

Question

I have a top bar containing 5 links that redirects to a div on a click on the same page, but whenever I clicked on the link it redirects to the exact same div but in the middle of the divs content not at the starting position also div content went under the header I guess?

P.S Page is so big so I have shown little code to produce the output so, it is not formatted well.. for full webpage and output please check the working page too

window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
    document.getElementById("bar").style.top = "90px";
  } else {
    document.getElementById("bar").style.top = "150px";
  }
}

.main-navigation-top {
  position: fixed;
  top: 0px;
  background: #fff;
  z-index: 999999;
  width: 100%;
}
 

.about-inner {
  position: relative;
  top: 90px;
}

.pg-content .container-fluid {
  padding: 60px;
}

.pg-bar .container-fluid {
  padding: 0px 60px;
}

.sub-nav {
  background: #FC453E;
  padding: 10px;
}

.pg-bar {
  position: fixed;
  top: -50px;
  width: 100%;
  display: block;
  transition: top 0.3s;
  z-index: 2;
}

.scrollbar-colored {
  scrollbar-color: #eee;
}


/* .pg-bar ul {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    padding-left: 0px;
    margin-bottom: 0px;
    overflow: auto;
} */

.d-flex {
  display: flex;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.ml-3 {
  margin-left: 1rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.font-weight-bolder {
  font-weight: bolder !important;
}

.w-100 {
  width: 100% !important;
}

.sub-nav {
  display: block;
  width: auto;
}

.sub-nav dl {
  padding: 2px 0;
  display: flex;
  justify-content: space-between;
}

.sub-nav>dl {
  white-space: nowrap;
  margin-bottom: 0;
  overflow-x: auto;
}

.sub-nav dd {
  display: inline-block;
  margin-bottom: 0px;
}

.sub-nav a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
}

.pg-bar li a {
  color: #fff;
  text-decoration: none;
}

.pg-content {
  padding: 100px 0px;
}

.pg-btn {
  padding: 8px 10px;
  border: none;
  background: #FC453E;
  color: #fff;
  border-radius: 2px;
  font-size: 20px;
}

.pg-content p {
  font-family: poppins;
  font-size: 14px;
  margin-bottom: 0px;
}

.pg-content h6 {
  color: #FC453E;
  font-size: 18px;
}

.home-content span {
  color: #FC453E;
  font-family: 'Poppins';
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #fff;
  background-color: #FC453E;
}

.nav-tabs .nav-link {
  color: #000;
  background-color: #eee;
  border-radius: 0px;
  padding: 8px 40px;
}

.col-12 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.tab-accrd h5 {
  font-size: 20px;
}

.p-0 {
  padding: 0px;
}

.nav-tabs {
  border: none;
}

.flug-i i {
  font-size: 30px;
  color: #FC453E;
}

.flug-i h4 {
  margin-bottom: 0px;
  text-transform: uppercase;
  margin-left: 10px;
  font-family: 'Poppins';
  margin-top: 0px;
  font-size: 24px;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.flug-cont {
  margin-left: 40px;
}

.flug-cont i {
  color: #eab177;
  position: relative;
  top: 3px;
}

.die {
  padding: 20px;
  background: #eee;
}

.ter h5 {
  text-transform: uppercase;
  font-family: poppins;
  font-size: 20px;
}

.ter td {
  font-family: poppins;
  font-size: 14px;
}

.ter .table thead th {
  border-bottom: 2px solid #fff;
}

.ter .table td,
.table th {
  border-top: 1px solid #fff;
}

.ter tbody tr {
  background: #eee;
}

.star {
  position: relative;
  background: #eee;
  padding: 15px 20px;
}

.star i {
  position: absolute;
  content: '';
  top: -12px;
  color: #FC453E;
  font-size: 25px;
  left: 0px
}

.name {
  padding: 10px;
  background: #eeeeee;
}

.more {
  color: #FC453E;
  border: 1px solid #FC453E;
  background: transparent;
  padding: 5px 15px;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 14px;
}

.resie i {
  position: relative;
  top: 3px;
  color: #FC453E;
}

html {
  scroll-behavior: smooth;
}

.nav-tabs>li>a {
  border-radius: 0px;
}

.nav-tabs>li>a {
  margin-right: 5px;
}


/* nav-tab */

.panel.with-nav-tabs .nav-tabs {
  border-bottom: none;
}

.panel.with-nav-tabs .nav-justified {
  margin-bottom: -1px;
}

.tab-content {
  padding: 0px;
  box-shadow: none;
}

.panel-body {
  padding: 0px;
}

.panel-group .panel+.panel {
  margin-top: 0px;
}

.panel-group .panel {
  border-bottom: 1px solid #fc453e;
  border-radius: 0px;
  cursor: pointer;
}


/********************************************************************/


/*** PANEL DEFAULT ***/

.with-nav-tabs.panel-default .nav-tabs>li>a,
.with-nav-tabs.panel-default .nav-tabs>li>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li>a:focus {
  color: #777;
}

.with-nav-tabs.panel-default .nav-tabs>.open>a,
.with-nav-tabs.panel-default .nav-tabs>.open>a:hover,
.with-nav-tabs.panel-default .nav-tabs>.open>a:focus,
.with-nav-tabs.panel-default .nav-tabs>li>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li>a:focus {
  color: #777;
  background-color: #ddd;
  border-color: transparent;
}

.with-nav-tabs.panel-default .nav-tabs>li.active>a,
.with-nav-tabs.panel-default .nav-tabs>li.active>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li.active>a:focus {
  color: #fff;
  background-color: #fc453e;
  border-color: #ddd;
  border-bottom-color: transparent;
}

.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu {
  background-color: #f5f5f5;
  border-color: #ddd;
}

.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a {
  color: #777;
}

.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a:focus {
  background-color: #ddd;
}

.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a,
.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a:focus {
  color: #fff;
  background-color: #555;
}

<link href="https://kit-pro.fontawesome.com/releases/v5.15.4/css/pro.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!---------- Main Header code starts here--------->
<div class="container-fluid main-navigation-top" style="padding: 15px 60px 15px;">
    <div class="row">
        <nav class="navbar navbar-inverse navbar-static-top">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <img src="../img/menu-bar.png" width="78">
                </button>
                <a class="navbar-brand" href="/index.html"><img src="../img/logo.png" width="32"> BCT-Touristik <span>Äthiopien Studienreisen</span></a>
            </div>

            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown megamenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Äthiopien Reisen <span class="caret"></span></a> 
                        <div class="clearfix"></div>
                    </li>
                    <li class="dropdown megamenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Afrikareisen <span class="caret"></span></a>
                        <ul class="dropdown-menu" style="display: none;">
                            <div class="container">
                                <div class="col-lg-3">
                                    <h3>Äthiopien</h3>
                                </div> 
                    </li>
                  
                  
                    <li class="dropdown megamenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kontakt &amp; Anmeldung <span class="caret"></span></a> 
               
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>

<!---------- Top Bar navigation with 5 links to div code starts here--------->

<section class="pg-bar" id="bar">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-8 col-sm-12">
        <div class="sub-nav">
          <dl class="scrollbar-colored">
            <dd><a href="#Home">Reise</a></dd>
            <dd><a href="#About">Reiseroute</a></dd>
            <dd><a href="#Service">Programm</a></dd>
            <dd><a href="#Carrer">Leistungen</a></dd>
            <dd><a href="#Contact">Termine & Preise</a></dd>

          </dl>
        </div>
      </div>
    </div>
  </div>
</section>


<!---------- content for 5 links to div code starts here--------->

<section class="pg-content">

  <!-- this line will also changed start here -->
  <div class="container-fluid">
    <!--change end here  -->
    <div class="row">
      <div class="col-lg-8">
        <div class="row">
          <div class="col-lg-8">
            <div class="home-content" id="Home">
              <h1 class="text-uppercase">Äthiopien Intensiv</h1>
              <button class="mt-2 pg-btn">Studienreise Äthiopien</button>
              <button class="ml-2 mt-2 pg-btn">24 Tage</button>
              <p class="mt-3">Wenn Sie auch zu der Sorte Mensch gehören, die dem Massentourismus abgeschworen haben und lieber atypische Reiseziele besuchen, dann liegen Sie mit dieser Reise nach Äthiopien völlig richtig. Denn im Gegensatz zu planmäßig errichteten Touristenzentren
                erleben Sie hier ein Land in seiner ursprünglichen Form. Land und Leute werden Ihnen unverändert entgegen treten. Dieses Erlebnis ist einzigartig und wird sicherlich einen bleibenden Eindruck hinterlassen.
              </p>
              <p class="mt-3">Auf dieser gut durchdachten Rundreise wird ihnen das Land Äthiopien und die dort vorhandene Kultur sowie atemberaubende Landschaften näher gebracht. Erleben sie Natur und historische Bauten, die bisher vom Massentourismus verschont geblieben
                sind. Neue Abenteuer warten auf Sie!</p>

              <h6 class="text-uppercase mt-4 mb-3">HIGHLIGHTS DIESER REISE:</h6>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Lalibela</span>- Besuch der 11 Felsenkirchen </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Aksum</span>- Auf den Spuren von Indianer Jones zur "Bundeslade" </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Afrika Legenden </span>- Usprung des blauen Nil </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Mago Nationalpark </span>- Zu Besuch bei dem Mursi </p>
              </div>

              <h6 class="text-uppercase mt-4 mb-3">VORTEILE BEI DER BCT-TOURISTIK:</h6>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Über 25 Jahre Erfahrung als Afrika Spezialist</span> </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Deutscher Studienreiseleiter der BCT-Touristik</span> </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Äthiopien Reisen in kleiner Gruppe</span></p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Alle Programmpukte, Transfer und Ausflüge im Preis inklusive</span></p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Umfangreiches Informationsmaterial bei allen Studienreisen</span></p>
              </div>

            </div>

          </div>

          <div class="col-lg-4">
            <img src="image/bctontour.png" class="img img-responsive">
          </div>
          <div class="col-lg-12 mt-5">
            <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="About">Reiseroute</button>
          </div>
          <div class="col-lg-12 mt-5">
            <img src="image/route-aethiopien-mursi_24tage.jpg" class="img img-responsive">
          </div>
          
           <div class="col-lg-12 mt-5">
              <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="Service" >Programme</button>
            </div>

          <div class="col-lg-12 mt-5">
            <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="Carrer">Leistungen</button>
          </div>
          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>FLÜGE</h4>

            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Hinflug Frankfurt – Addis Abeba</p>
            </div>
         
          </div>
          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>Hotel</h4>

            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Hotelunterbringung in 3* und 4* Hotels (entspricht Mittelklasse-Hotels in Deutschland):
              </p>
            </div>
          
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">1 Übernachtung in Hawassa</p>
            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">2 Übernachtungen in Arba Minch</p>
            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">2 Übernachtungen in Turmi</p>
            </div>
          </div>
          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4 class="text-wrap">VERPFLEGUNG</h4>

            </div>
            
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Abendunterhaltung in Lalibela mit Kaffee-Zeremonie</p>
            </div>
          </div>
          <div class="col-lg-6 mt-5">
             
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Ethnologisches Museum Addis Abeba</p>
            </div>
          </div>
          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>Nordäthiopien entdecken</h4> 
            </div> 
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Blaue Nil Fälle</p>
            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Debreh Libanos Kloster</p>
            </div>
          </div>

          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>Süden Äthiopiens</h4>

            </div> 
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Mago Nationalpark</p>
            </div>

          </div>

          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>ABC Pluspunkte</h4>

            </div>
 
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Informationsmaterial</p>
            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Auslandskrankenversicherung</p>
            </div>

          </div>
          
           <div class="col-lg-12 mt-5">
              <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="Contact">Termine & preise</button>
            </div>

</section>