0

Есть header, высота 100vh, внутри него есть блок offset с двумя блоками и кнопкой. При размере экрана в 320 px этот блок съезжает вниз, выходя за родительский блок.

По какой причине ?

.header{
	padding-top: 30px;
	background: #000 url(../img/header-background.jpg) no-repeat center top fixed;
	background-size: cover;
	height: 100vh;
}

.logo{
	text-transform: uppercase;
	color: #fff;
	font-weight: bold;
	font-size: 29px;
    padding-right: 23px;
}

.phone{
	font-size: 13px;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
}

.phone__icon{
	padding-right: 7px;
	color: #bec8c8;
}

.menu{
	list-style: none;	
	justify-content:flex-end;
	margin-bottom: 0;
	margin-top: 12px;
	padding-left: 0;
	width: 585px;
}

.menu__item{
	font-size: 13px;
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
	
}

.menu__item a{
	padding: 10px;
	color: #b3bfbf;
	text-decoration: none;
	margin-right: 26px;
}

.menu__item a:hover{
	background-color: #6a7f80;
	color: #fff;
	border-radius: 3px;
}

.offset{
	margin-top: 236px;
}

.offset__title{
	font-family: 'Roboto', sans-serif;
	font-size: 38px;
	color: #fff;
}

.offset__text{
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	color: #fff;
	width: 513px;
}

.offset__btn{
	font-family: 'Montserrat', sans-serif;
	color: #fff;
	background-color: #6fb048;
	width: 186px;
	display: block;
	text-align: center;
	text-transform: uppercase;
	padding: 19px 0;
	font-size: 14px;
	border-radius: 3px;
}

.offset__btn:hover{
	color: #fff;
	text-decoration: none;
	background-color: #5a8f3a;
}

.features{
	padding-top: 95px;
}

.title__main{
	font-size: 32px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	color: #0f5f5c;
	text-align: center;
}

.title__main:after{
	content: "";
	display: block;
	width: 65px;
	height: 1px;
	background-color: #6fb048;
	margin: 18px auto;
}

.title__text{
	font-size: 15px;
	font-family: 'Roboto', sans-serif;
	color: #83a7a5;
	text-align: center;
	width: 450px;
	margin: 0 auto;
}

.feature{
	padding-top: 68px;
	padding-bottom: 175px;
}

.feature__title{
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	color: #0f5f5c;
	padding-top: 30px;
}

.feature__text{
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	color: #83a7a5;
	line-height: 22px;
	width: 335px;
}
<header class="header">
     <div class="container">
       <div class="row">
         <div class="col-lg-2 col-sm-6">
          <div class="logo">
            WAPIK
          </div>
         </div>
         <div class="col-lg-2 mt-auto mb-auto col-sm-6">
            <div class="phone">
              <i class="fas fa-phone-alt phone__icon"></i>+62 202 555 0117
            </div>
          </div>
          <div class="col-lg-6 ml-auto p-0">
            <nav>
              <ul class="menu d-flex">
                <li class="menu__item"><a href="#">Home</a></li>
                <li class="menu__item"><a href="#">About Us</a></li>
                <li class="menu__item"><a href="#">pricing</a></li>
                <li class="menu__item"><a href="#">Contact Us</a></li>
                <li class="menu__item"><a href="#">Get Started</a></li>
              </ul>
            </nav>
          </div>
       </div>

       <div class="row">
        <div class="col-lg-6">
          <div class="offset">
            <h1 class="offset__title">Welcome to Wapik</h1>
            <p class="offset__text">Wapik is multipurpose template, with modern and smart design. Wapik is perfect template for you!</p>
            <a href="#" class="offset__btn">LEARN MORE</a>
          </div>
        </div>
       </div>
     </div>
   </header>
   <section class="features">
     <div class="container">
       <div class="row">
         <div class="col-lg-12">
           <div class="features__title">
             <h2 class="title__main">Best of our features</h2>
             <p class="title__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
             Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
           </div>
         </div>
       </div>
       <div class="row">
         <div class="col-lg-4">
           <div class="feature text-center">
             <img src="img/icon1.png" alt="icon">
             <div class="feature__block">
               <h3 class="feature__title">
                lonicons
              </h3>
              <p class="feature__text">
               Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem.
             </p>
           </div>
         </div>
         </div>
         <div class="col-lg-4">
           <div class="feature text-center">
             <img src="img/icon2.png" alt="icon">
             <div class="feature__block">
               <h3 class="feature__title">
                Creative Design
              </h3>
              <p class="feature__text">
               Maecenas faucibus mollis interdum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
             </p>
           </div>
         </div>
         </div>
         <div class="col-lg-4">
           <div class="feature text-center">
             <img src="img/icon3.png" alt="icon">
             <div class="feature__block">
               <h3 class="feature__title">
                Photoshop and Sketch
              </h3>
              <p class="feature__text">
               Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna.
             </p>
           </div>
         </div>
         </div>
       </div>

1 ответ 1

0

Добавь в класс .header дополнительно width: 100%;

1
  • 1
    ничего не дало.
    – Vladislove
    9 авг 2019 в 14:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.