Не могу добавить новую секцию

Question

    <!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, maximum-scale=1.0, user-scalable=0">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
      <link rel="stylesheet" type="text/css" href="style.css">
      <title>Bikes and motocycles</title>
   </head>
   <body>
   <header class="header">
      <div class="container align-self-start d-flex">
         <div class="row">
            <nav class="navbar nav_menu">
               <ul class="ulbar">
               <li><div class="col-"><a class="navi about " href='#'>About</a></div></li>
               <li><div class="col-"><a class="navi us" href='#'>us</a></div></li>
               <div class="col-"><p class="dot">.</p></div>
               <li><div class="col-"><a class="navi work " href='#'>Work</a></div></li>
               <li><img src="../Icons/logo.png" width="90" height="90" class="logo"></li>
               <li><div class="col- text-sm-left"><a class="navi shop" href='#'>Shop</a></div></li>
               <div class="col-"><p class="dot2">.</p></div>
               <li><div class="col- text-sm-left"><a class="navi contact" href='#'>Contact</a></div></li>
               </ul>
             </nav>
          </div>
       </div>
    </header>
    <section id="generation">

    </section>
   </body>
</html>

    header {
    background: url(../Icons/layer7.png) no-repeat center top / cover ;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
@media (max-width:1200px) {
    .container{
        max-width: 970px;
    }
}
@media (max-width:992px) {
    .container{
        max-width: 750px;
    }
}
@media (max-width:767px) {
    .container{
        max-width: none;
    }
}
.container {
   max-width: 1200px; 
   margin: 0px auto;
   padding: 0px 15px;
}
* {
    padding: 0;
    margin: 0;
}
img {
    max-width: 100%;
    max-height: 100%;
}
h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}
.ulbar {
    margin-left: 0;
    margin-right: 0;
    margin-top: 70px;
    margin-right: -500px;
    display: flex;
    flex-flow: nowrap;
    justify-content: space-between;
}
div {
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
}
.ulbar {
   margin-right: 0px;
   list-style-type: none;
}
.navi {
    color: #4d4959;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
    display: inline;
    text-align: justify;
}
.logo {
    margin-top: -20px;
    margin-right: 15px;
}
.about {
   margin-right: 100px;
}
.us {
    margin-left: -175px;
}
.shop {
    margin-right: -100px;
}
.work {
    margin-right: 45px;
}
.contact {
    margin-left: 50px;
}
.dot {
    margin-left: -80px;   
}
.dot2 { 
    margin-left: 110px;
}
#generation {
    background-color: #f7f7f7;
    height: 695px;
}

Я пытался даже создать секцию через [ КодКак видите на скриншоте не появляется новая секция][1]

Answer 1

Всё дело в абсолютном позиционировании header. Удали, или закомментируй position: absolute.

    header {
    background: url(../Icons/layer7.png) no-repeat center top / cover ;
    /*position: absolute;*/
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
@media (max-width:1200px) {
    .container{
        max-width: 970px;
    }
}
@media (max-width:992px) {
    .container{
        max-width: 750px;
    }
}
@media (max-width:767px) {
    .container{
        max-width: none;
    }
}
.container {
   max-width: 1200px; 
   margin: 0px auto;
   padding: 0px 15px;
}
* {
    padding: 0;
    margin: 0;
}
img {
    max-width: 100%;
    max-height: 100%;
}
h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}
.ulbar {
    margin-left: 0;
    margin-right: 0;
    margin-top: 70px;
    margin-right: -500px;
    display: flex;
    flex-flow: nowrap;
    justify-content: space-between;
}
div {
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
}
.ulbar {
   margin-right: 0px;
   list-style-type: none;
}
.navi {
    color: #4d4959;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
    display: inline;
    text-align: justify;
}
.logo {
    margin-top: -20px;
    margin-right: 15px;
}
.about {
   margin-right: 100px;
}
.us {
    margin-left: -175px;
}
.shop {
    margin-right: -100px;
}
.work {
    margin-right: 45px;
}
.contact {
    margin-left: 50px;
}
.dot {
    margin-left: -80px;   
}
.dot2 { 
    margin-left: 110px;
}
#generation {
    background-color: #f7f7f7;
    height: 695px;
}

   <!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, maximum-scale=1.0, user-scalable=0">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
      <link rel="stylesheet" type="text/css" href="style.css">
      <title>Bikes and motocycles</title>
   </head>
   <body>
   <header class="header">
      <div class="container align-self-start d-flex">
         <div class="row">
            <nav class="navbar nav_menu">
               <ul class="ulbar">
               <li><div class="col-"><a class="navi about " href='#'>About</a></div></li>
               <li><div class="col-"><a class="navi us" href='#'>us</a></div></li>
               <div class="col-"><p class="dot">.</p></div>
               <li><div class="col-"><a class="navi work " href='#'>Work</a></div></li>
               <li><img src="../Icons/logo.png" width="90" height="90" class="logo"></li>
               <li><div class="col- text-sm-left"><a class="navi shop" href='#'>Shop</a></div></li>
               <div class="col-"><p class="dot2">.</p></div>
               <li><div class="col- text-sm-left"><a class="navi contact" href='#'>Contact</a></div></li>
               </ul>
             </nav>
          </div>
       </div>
    </header>
    <section id="generation">
      тест
    </section>
   </body>
</html>

БЛОГ НА HUSL

Не могу добавить новую секцию

Ответы (1 шт):