Отображение блока под фоном (не с новой строки после фона)

Question

Не могу понять: почему блок отображает не после фонового изображения, а внутри под ним?

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Главная страница</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/416d26a152.js" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">

</head>
<body>
    <header>
        <div class="logo">
           <img src="images/logo.png">
        </div>
        <nav >
            <li><a href="#">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Courses</a></li>
            <li><a href="#">Testomonial</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="">Faqs</a></li>
            <li><a href="">Contact</a></li>
        </nav>
    </header>
    <section class="bk-img">
    <div class="container">
    <h1>Develop a passion for <br>learning new things</h1>
    <p>Was certainly remaining engrossed applauded sir how discovery. Settled opinion how enjoyed greater joy adapted too shy. Now properly surprise expenses</p>
    <section>
    <form>
    <input type="text" class="search" placeholder="Search courses">
    <button type="submit" class="btn">
        <i class="fas fa-search"></i>
    </button>
    </form>
    </section>
    </div>
    </section>

    <div class="info">
        <div>
            <p>sdfdsf</p>
        </div>
        <div>

        </div>
    </div>

</body>
</html>

CSS:

html{
    box-sizing: border-box;
}
*,*::before,*::after{
    box-sizing: inherit;
}
*{
    margin: 0;
    padding: 0;
}
body{
    font-family: "Poppins";
}
header{
    position: relative;
    height: 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 2;
}
header{
    padding-right: 15px;
    padding-left: 15px;
    margin-right: 20%;
    margin-left: 20%;
}
nav li {
    display: inline-block;
}
nav li a {
    background: rgba(0, 0, 0, 0) no-repeat scroll 0 0;
    font-size: 16px;
    letter-spacing: 1px;
    padding: 40px 10px;
}
nav li a::hover{
    transition: all 0.3s ease 0s
}
nav{
    margin-left: auto;
}
.logo{
    padding: 15px 15px;
}
.bk-img{
    height: 100%;
    background: url(images/slide_1.jpg);
    left: 0;
    position: absolute;
    background-position: center;
    top: 0;
    width: 100%;
}
.bk-img:after{
    background: #000 no-repeat scroll 0 0;
    content: "";
    height: 100%;    
    opacity: 0.7;
    position: absolute;
    width: 100%;
}
.container{
    z-index: 1;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    color: white;
    width: 37%;
    margin-left: -25%;

}
.bk-img{
    display: flex;
    justify-content: center;
    align-items: center;
}
form{
    border-radius: 50px;
    height: 60px;
    overflow: hidden;
    position: relative;
    width: 70%;
}
input{
    border: 0 none;
    color: #333333;
    height: 100%;
    width: 100%;
    padding: 10px 25px;
}
.btn{
    background: #31dc89 none repeat scroll 0 0;
    border: 0 none;
    font-size: 25px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 80px;
}
h1{
    font-size: 42px;
    margin-bottom: 30px;
    font-weight: 900;
}
.container p{
    margin-bottom: 10px;
    font-weight: 400;
}
.container section{
    padding-top: 40px;
}

БЛОГ НА HUSL

Отображение блока под фоном (не с новой строки после фона)

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