Дочерний блок выходит за родительский блок

141

23 мая 2021, 16:50

Есть 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>

Answer 1

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