@Eugene20

При сжатии окна происходит выход фона за пределы меню. Как решить данную проблем?

Здравствуйте, вот у меня получается так, есть меню, под ним фон, которое отображается над ним за счёт z-index с прозрачностью. На мониторе 1920*1080 всё показывает нормально, указывал размеры блока в процентах, вот когда сжимаю окно происходит выход фона за меню, в результате чего получается пустое меню без фона под ним. Что в данном случае исправить?
<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>


Код на CSS:
html{
    box-sizing: border-box;
}
*,*::before,*::after{
    box-sizing: inherit;
}
*{
    margin: 0;
    padding: 0;
}
body,
html {
    height: 100%;
    width: 100%;
}

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;
    padding: 40px 10px;
    text-decoration: none;
    color: white;
}
nav li a:hover{
    transition: all 0.3s ease 0s;
    color: mediumseagreen;
        
}
nav{
    margin-left: auto;
}
.logo{
    padding: 15px 0px;
    margin-left: -15px;
}
.bk-img{
    height: 100%;
    background: url(images/slide_1.jpg) no-repeat ;
    left: 0;
    background-position: center;
    top: 0;
    margin-top: -5%;
}
.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;
}
  • Вопрос задан
  • 97 просмотров
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
04 апр. 2020, в 21:01
35000 руб./за проект
04 апр. 2020, в 20:32
5000 руб./за проект
04 апр. 2020, в 20:30
25000 руб./за проект