Появляется огромная белая полоса с Bootstrap4

239
14 марта 2018, 04:24

Привет!Я начал делать адаптив для сайта и заметил что начала появлятся огромная белая полоса справа(видно на скриншоте).С чем это связано и как это исправить?

Пока что все более менее,но если проскролить вправо то...

@import "vars" 
@import "fonts" 
@import "libs" 
 
ul 
    list-style: none 
 
.Companyname 
    font-family: $PoiretOne 
    color: $white 
    font-size: 30px 
    margin-top: 74px 
    padding-left: 174px 
    margin-bottom: 0px 
    span:last-child 
        color: #C9C9C6 
        font-size: 28px  
 
.first-block 
    background-color: $bg-gray 
.Top-menu 
    display: flex 
    margin-top: 75px 
    margin-bottom: 0px 
    li 
        margin-left: 15px 
        a 
            color: $white 
            font-size: 13px 
            font-family: $MontserratRegular 
            text-decoration: none 
            text-transform: uppercase 
            &::after 
                content: '' 
                width: 100% 
                height: 2px 
                display: block 
                background-color: $white 
                transform: scale(0) 
                transition: all 0.2s  
            &:hover 
                    &::after 
                        transform: scale(1) 
.BigGrayText 
    color: $white 
    font-size: 50px 
    margin-left: 172px 
    margin-top: 196px 
    font-family: $CabinRegular 
    width: 640px 
.first-block-2 
    background-color: $bg-gray 
    button 
        background-color: $green 
        width: 224px 
        height: 56px 
        outline: none 
        border: none 
        color: $white 
        text-transform: uppercase 
        font-family: $LatoBold 
        font-size: 13px 
        border-radius: 5px  
        margin-top: 60px 
.SmallGrayText 
    font-size: 15px 
    width: 574px 
    margin-left: 174px 
    font-family: $LatoLight  
    color: $white 
    line-height: 32px 
    margin-bottom: 272px 
.second-block 
    background-color: $white 
    margin-bottom: 100px 
    &-bigtext 
        font-family: $CabinRegular 
        font-size: 48px 
        width: 100% 
        color: $very-dark 
        text-align: center 
        margin-top: 128px 
.second-block-2 
    margin-left: 176px 
    margin-right: 176px 
    margin-bottom: 150px 
    &-icon 
        font-size: 30px 
        color: $white 
        width: 65px 
        height: 65px 
        text-align: center 
        background-color: $green 
        border-radius: 50% 
        line-height: 62px 
        transform: translateY(-30px) 
    &-iconcontainer 
        display: flex 
        justify-content: center 
        width: 100% 
    &-main 
        display: flex 
        justify-content: center 
        flex-direction: column 
        flex-wrap: wrap 
        width: 280px 
        border: 1px solid #f2f2f2 
    &-bigtext 
        font-family: $LatoBold 
        font-size: 18px 
        color: $very-dark 
        text-align: center 
        text-transform: uppercase 
    &-smalltext 
        font-family: $LatoRegular 
        font-size: 16px 
        text-align: center 
.third-block 
    background-color: $gray 
    &-bigtext 
        font-family: $CabinRegular 
        color: $very-dark 
        font-size: 48px 
        margin-bottom: 40px 
        width: 510px 
        margin-top: 128px 
    &-text 
        font-family: $LatoRegular 
        color: $text-gray 
        font-size: 16px 
        margin-bottom: 20px 
        width: 510px 
    &-button 
        font-family: $LatoBold 
        font-size: 15px 
        text-transform: uppercase 
        color: $very-dark 
        border: 1px solid $very-dark 
        border-radius: 5px 
        padding: 15px 
        width: 232px 
        text-align: center 
        margin-bottom: 130px 
        &:hover 
            color: $green 
            border: 1px solid $green 
            transition: all 0.2s 
.ClientsBigText 
    font-family: $CabinRegular 
    font-size: 48px 
    color: $very-dark 
    text-align: center 
    width: 100% 
    margin-top: 128px 
.ClientMain 
    width: 437px 
.ClientText 
    font-family: $LatoRegular 
    font-size: 16px 
    color: $text-gray 
    border: 2px solid #f2f2f2 
    padding: 15px 
.block__hint 
    position: relative 
    border: 2px solid #f2f2f2 
    background: $white 
.block__hint::after 
    display: block 
    content: "" 
    position: absolute 
    height: 15px 
    width: 15px 
    background: $white 
    border-left: 2px solid #f2f2f2 
    border-top: 2px solid #f2f2f2 
    bottom: -10px 
    right: 20px 
    transform: rotate(-135deg) 
.ClientPerson 
    text-align: right 
    float: left 
    width: 83% 
    span:first-child 
        font-family: $LatoBold 
        font-size: 15px 
        color: $very-dark 
    span:last-child 
        font-family: $LatoRegular 
        font-size: 13px 
        color: #666666 
.ClientImage 
    border-radius: 50% 
    margin-left: 15px 
    width: 58px 
    height: 58px 
.fourth-bloc 
     background-color: #353535 
.ExpMain 
    display: flex 
    justify-content: flex-end 
.Exp 
    display: flex 
    flex-direction: column 
    &-BigText 
        font-family: $CabinRegular 
        font-size: 48px 
        color: $white 
        width: 465px 
        margin-top: 130px 
    &-Text 
        font-family: $LatoRegular 
        font-size: 15px 
        color: $white 
        width: 465px 
    &-Button 
        font-family: $LatoBold 
        font-size: 15px 
        border: 2px solid $white 
        border-radius: 5px 
        padding: 18px 
        width: 234px 
        margin-top: 35px 
        margin-bottom: 150px 
        &:hover 
            color: $green 
            transition: all 0.2s 
            border: 2px solid $green 
        span 
            padding: 20px 25px 20px 25px 
            a 
                color: $white 
                text-transform: uppercase 
                text-decoration: none 
.SkillsMain 
    margin-left: 20px 
.Skills 
    &-text 
        font-family: $LatoRegular 
        font-size: 15px 
        color: $white 
.Progress 
    position: relative 
    width: 490px 
    height: 20px 
    background-color: $white 
.bar 
    position: absolute 
    width: 1% 
    height: 100% 
    background-color: $green 
    &::after 
        display: block 
        content: "" 
        position: absolute 
        height: 10px 
        width: 10px 
        background: #353535 
        border-left: 2px solid $very-dark 
        border-top: 2px solid $very-dark 
        bottom: 25px 
        right: 0px 
        transform: rotate(-135deg) 
.BlogBigText 
    font-family: $CabinRegular 
    font-size: 48px 
    color: $very-dark 
    width: 100% 
    text-align: center 
    margin-top: 120px 
    margin-bottom: 60px 
.MainBlog 
    display: flex 
    justify-content: center 
    margin-bottom: 114px 
.Blog 
    display: flex 
    flex-direction: column 
    justify-content: center 
    img 
        width: 310px 
        height: 195px 
        margin-bottom: 15px 
    &-bigtext 
        font-family: $LatoBold 
        font-size: 18px 
        color: $very-dark 
        margin-left: 15px 
    &-graytext 
        font-family: $LatoRegular 
        font-size: 14px 
        color: #999999 
        margin-left: 15px 
        span 
            span 
                padding-left: 5px 
                padding-right: 5px 
        span:last-child 
            padding-left: 10px 
    &-text 
        font-family: $LatoRegular 
        font-size: 16px 
        color: $text-gray 
        margin-left: 15px 
.ReadyRow 
    background-color: $green 
    height: 175px 
.ReadyMain 
    margin-top: 30px 
    display: flex 
    flex-direction: column 
    p:first-child 
        font-family: $LatoBold 
        font-size: 24px 
        color: $white 
        padding-left: 15px 
    p:last-child 
        font-family: $LatoRegular 
        font-size: 16px 
        color: $white 
        padding-left: 15px 
.Readybtn 
    display: flex 
    justify-content: flex-start 
.Ready-Button 
    font-family: $LatoBold 
    font-size: 16px 
    color: $white 
    text-transform: uppercase 
    border: 2px solid $white 
    padding: 10px 
    border-radius: 5px 
    margin-top: 30px 
    a 
        color: $white 
        text-decoration: none 
        padding: 15px 
.FooterRow 
    background-color: #232323 
.Companynamefooter 
    font-family: $PoiretOne 
    color: $white 
    font-size: 30px 
    span:last-child 
        color: #C9C9C6 
        font-size: 28px  
.FooterInfo 
    margin-bottom: 70px 
    margin-top: 50px 
    p:first-child 
        font-family: $LatoBold 
        font-size: 15px 
        color: $white 
        text-transform: uppercase 
    p:last-child 
        font-family: $LatoRegular 
        font-size: 14px 
        color: $white 
    &-Adress 
        font-family: $LatoRegular 
        font-size: 14px 
        color: $white 
 
@media (max-width: 1053px) 
    .Companyname 
        padding-left: 50px 
@media (max-width: 770px) 
    .Top-menu 
        margin-top: 30px 
        li 
            margin-left: 40px 
@media (max-width: 510px) 
    .Top-menu 
        display: none 
 
 
 
 
 
 
 
 
 
@import "media" // Always at the end
<!DOCTYPE html> 
<html lang="ru"> 
 
<head> 
 
	<meta charset="utf-8"> 
	<base href="/"> 
 
	<title>CompanyName</title> 
	<meta name="description" content=""> 
 
	<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
 
	<!-- Template Basic Images Start --> 
	<meta property="og:image" content="path/to/image.jpg"> 
	<link rel="icon" href="img/favicon/favicon.ico"> 
	<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon-180x180.png"> 
	<!-- Template Basic Images End --> 
 
	<!-- Custom Browsers Color Start --> 
	<meta name="theme-color" content="#FFF"> 
	<!-- Custom Browsers Color End --> 
	<script defer src="libs/fontawesome-free-5.0.8/svg-with-js/js/fontawesome-all.min.js"></script> 
	<link rel="stylesheet" href="css/main.min.css"> 
 
</head> 
 
<body> 
	<div class="container-fluid"> 
		<div class="row first-block align-items-center "> 
			<p class="Companyname col-xl-7 col-lg-6 col-md-5 col-sm-12"> 
				<span>company</span> 
				<span>name</span> 
			</p> 
			<ul class="col-xl-5 col-md-5 col-sm-12 Top-menu"> 
				<li> 
					<a href="#">Home</a> 
				</li> 
				<li> 
					<a href="#">About</a> 
				</li> 
				<li> 
					<a href="#">Blog</a> 
				</li> 
				<li> 
					<a href="#">Portfolio</a> 
				</li> 
				<li> 
					<a href="#">Contact</a> 
				</li> 
			</ul> 
		</div> 
		<div class="row first-block-2"> 
			<p class="BigGrayText"> 
				We’re here to create your online presense and style 
			</p> 
			<p class="SmallGrayText"> 
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mattis orci dapibus risus dignissim, viverra pellentesque 
				arcu ullamcorper. Mauris a tincidunt lectus. Proin nec venenatis quam. 
				<br> 
				<button>start today with us</button> 
			</p> 
 
		</div> 
		<div class="row second-block"> 
			<p class="second-block-bigtext">Features you’ll love</p> 
		</div> 
		<div class="row  second-block-2"> 
			<div class="col-4"> 
				<div class="second-block-2-main"> 
					<div class="second-block-2-iconcontainer"> 
						<p class="second-block-2-icon"> 
							<i class="fas fa-user"></i> 
						</p> 
					</div> 
					<p class="second-block-2-bigtext">Personal touch</p> 
					<p class="second-block-2-smalltext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat purus in ferment uectetur tortor id, pharetra 
						lorem. 
					</p> 
				</div> 
			</div> 
			<div class="col-4"> 
				<div class="second-block-2-main"> 
					<div class="second-block-2-iconcontainer"> 
						<p class="second-block-2-icon"> 
							<i class="fas fa-flag"></i> 
						</p> 
					</div> 
					<p class="second-block-2-bigtext">Unique solutions</p> 
					<p class="second-block-2-smalltext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat purus in ferment uectetur tortor id, pharetra 
						lorem. 
					</p> 
				</div> 
			</div> 
			<div class="col-4"> 
				<div class="second-block-2-main"> 
					<div class="second-block-2-iconcontainer"> 
						<p class="second-block-2-icon"> 
							<i class="fas fa-paint-brush"></i> 
						</p> 
					</div> 
					<p class="second-block-2-bigtext">Help in promotion</p> 
					<p class="second-block-2-smalltext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat purus in ferment uectetur tortor id, pharetra 
						lorem. 
					</p> 
				</div> 
			</div> 
		</div> 
		<div class="row justify-content-end third-block"> 
			<div class="col-6"> 
				<p class="third-block-bigtext">Our Short Story</p> 
				<p class="third-block-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat purus in ferment uectetur tortor id, pharetra lorem. 
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat purus in ferment uectetur tortor id, pharetra 
					lorem. . 
				</p> 
				<br> 
				<p class="third-block-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat purus in ferment uectetur tortor id, pharetra lorem. 
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat purus in ferment uectetur tortor id, pharetra 
					lorem. 
 
				</p> 
				<br> 
				<p class="third-block-button">More about our team</p> 
			</div> 
		</div> 
		<div class="row"> 
			<p class="ClientsBigText">Our Clients Says</p> 
		</div> 
		<div class="row justify-content-center"> 
			<div class="col-5"> 
				<div class="ClientMain"> 
					<p class="ClientText block__hint"> 
						Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus 
						ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. 
						Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. 
					</p> 
					<p class="ClientPerson"> 
						<span>Joe Doe</span> 
						<br> 
						<span>Creative Deirector at Gmoogle.com</span> 
					</p> 
					<img class="ClientImage" src="img/photo-person.png" alt="ClientPhoto"> 
				</div> 
			</div> 
			<div class="col-5"> 
				<div class="ClientMain"> 
					<p class="ClientText block__hint"> 
						Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus 
						ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. 
						Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. 
					</p> 
					<p class="ClientPerson"> 
						<span>Joe Doe</span> 
						<br> 
						<span>Creative Deirector at Gmoogle.com</span> 
					</p> 
					<img class="ClientImage" src="img/photo-person.png" alt="ClientPhoto"> 
				</div> 
			</div> 
			<div class="col-5"> 
				<div class="ClientMain"> 
					<p class="ClientText block__hint"> 
						Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus 
						ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. 
						Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. 
					</p> 
					<p class="ClientPerson"> 
						<span>Joe Doe</span> 
						<br> 
						<span>Creative Deirector at Gmoogle.com</span> 
					</p> 
					<img class="ClientImage" src="img/photo-person.png" alt="ClientPhoto"> 
				</div> 
			</div> 
			<div class="col-5"> 
				<div class="ClientMain"> 
					<p class="ClientText block__hint"> 
						Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus 
						ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. 
						Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. 
					</p> 
					<p class="ClientPerson"> 
						<span>Joe Doe</span> 
						<br> 
						<span>Creative Deirector at Gmoogle.com</span> 
					</p> 
					<img class="ClientImage" src="img/photo-person.png" alt="ClientPhoto"> 
				</div> 
			</div> 
		</div> 
		<div class="row fourth-bloc"> 
			<div class="col"> 
				<div class="ExpMain"> 
					<div class="Exp"> 
						<p class="Exp-BigText">Our Experience</p> 
						<p class="Exp-Text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat purus in ferment uectetur tortor id, pharetra 
							lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat purus in ferment uectetur tortor id, 
							pharetra lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat purus in ferment uectetur tortor 
							id, pharetra lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat purus in ferment uectetur 
							tortor id, pharetra lorem. 
						</p> 
						<p class="Exp-Button"> 
							<span> 
								<a href="#">View case studies</a> 
							</span> 
						</p> 
					</div> 
				</div> 
			</div> 
			<div class="col"> 
				<div class="SkillsMain"> 
					<div class="Skills"> 
						<p class="Exp-BigText">Skills</p> 
						<p class="Skills-text">C++ development</p> 
						<div class="Progress" id="Progress1" onscroll="move(95)"> 
							<div class="bar" id="bar1"> 
 
							</div> 
						</div> 
						<p class="Skills-text">.Net</p> 
						<div class="Progress" id="Progress2" onscroll="move2(75)"> 
							<div class="bar" id="bar2"> 
 
							</div> 
						</div> 
						<p class="Skills-text">HTML5</p> 
						<div class="Progress" id="Progress3" onscroll="move(85)"> 
							<div class="bar" id="bar3"> 
 
							</div> 
						</div> 
						<p class="Skills-text">jQuery</p> 
						<div class="Progress" id="Progress4" onscroll="move(90)"> 
							<div class="bar" id="bar4"> 
 
							</div> 
						</div> 
						<p class="Skills-text">Angular</p> 
						<div class="Progress" id="Progress5" onscroll="move(70)"> 
							<div class="bar" id="bar5"> 
 
							</div> 
						</div> 
					</div> 
				</div> 
			</div> 
		</div> 
		<div class="row"> 
			<p class="BlogBigText">From the Blog</p> 
		</div> 
		<div class="row justify-content-center"> 
			<div class="col-3"> 
				<div class="MainBlog"> 
					<div class="Blog"> 
						<img src="img/BlogImage.png" alt="BlogImage"> 
						<p class="Blog-bigtext">Cache Invalidation Strategies With Varnish Cache</p> 
						<p class="Blog-graytext"> 
							<span><span><i class="far fa-calendar"></span></i>March 4, 2014</span> 
							<span><span><i class="fas fa-comments"></i></span>2 comments</span> 
						</p> 
						<p class="Blog-text">Shortly thereafter, I was working with RetailMeNot, tasked with designing its iOS and Android app tutorial. The product 
							team wanted to make sure hat users were clear about the value</p> 
 
					</div> 
				</div> 
			</div> 
			<div class="col-3"> 
				<div class="MainBlog"> 
					<div class="Blog"> 
						<img src="img/BlogImage.png" alt="BlogImage"> 
						<p class="Blog-bigtext">Cache Invalidation Strategies With Varnish Cache</p> 
						<p class="Blog-graytext"> 
							<span><span><i class="far fa-calendar"></span></i>March 4, 2014</span> 
							<span><span><i class="fas fa-comments"></i></span>2 comments</span> 
						</p> 
						<p class="Blog-text">Shortly thereafter, I was working with RetailMeNot, tasked with designing its iOS and Android app tutorial. The product 
							team wanted to make sure hat users were clear about the value</p> 
 
					</div> 
				</div> 
			</div> 
			<div class="col-3"> 
				<div class="MainBlog"> 
					<div class="Blog"> 
						<img src="img/BlogImage.png" alt="BlogImage"> 
						<p class="Blog-bigtext">Cache Invalidation Strategies With Varnish Cache</p> 
						<p class="Blog-graytext"> 
							<span><span><i class="far fa-calendar"></span></i>March 4, 2014</span> 
							<span><span><i class="fas fa-comments"></i></span>2 comments</span> 
						</p> 
						<p class="Blog-text">Shortly thereafter, I was working with RetailMeNot, tasked with designing its iOS and Android app tutorial. The product 
							team wanted to make sure hat users were clear about the value</p> 
 
					</div> 
				</div> 
			</div> 
		</div> 
		<div class="row ReadyRow align-items-center justify-content-center"> 
			<div class="col-8"> 
				<div class="ReadyMain"> 
					<p>Are you ready to go?</p> 
					<p>Here the call to action area. Lorem ipsum dolor sit amet and click to the button</p> 
				</div> 
			</div> 
			<div class="col-3"> 
				<div class="Readybtn"><p class="Ready-Button"><a href="#">Start your project</a></p></div> 
			</div> 
		</div> 
		<div class="row align-items-center justify-content-around FooterRow"> 
			<div class="col-2"> 
				<p class="Companynamefooter"> 
					<span>company</span> 
					<span>name</span> 
				</p> 
			</div> 
			<div class="col-2"> 
				<div class="FooterInfoMain"> 
					<div class="FooterInfo"> 
						<p>new york</p> 
						<p class="FooterInfo-Adress">Address goes here in a one or two  
							lines, maybe lorem ipsum</p> 
						<p> 
							<span>+44 800 800 90</span><span>info@domen.com</span>  
						</p> 
					</div> 
				</div> 
				</div> 
			<div class="col-2"> 
				<div class="FooterInfoMain"> 
					<div class="FooterInfo"> 
						<p>london</p> 
						<p class="FooterInfo-Adress">Address goes here in a one or two  
							lines, maybe lorem ipsum</p> 
						<p> 
							<span>+44 800 800 90</span><span>info@domen.com</span>  
						</p> 
					</div> 
				</div> 
				</div> 
				<div class="col-2"> 
					<div class="FooterInfoMain"> 
						<div class="FooterInfo"> 
							<p>madrid</p> 
							<p class="FooterInfo-Adress">Address goes here in a one or two  
								lines, maybe lorem ipsum</p> 
							<p> 
								<span>+44 800 800 90</span><span>info@domen.com</span>  
							</p> 
						</div> 
					</div> 
					</div> 
			</div> 
		</div> 
	</div> 
 
 
	<script src="js/scripts.min.js"></script> 
 
</body> 
 
</html>

P.S. Извините что скинул SASS,CSS минифицируется.

Answer 1

У вас много элементов в фиксированной шириной, к примеру

width: 510px, width: 437px

проверьте, может именно они и не помещаются в контейнер.

Второй вариант такой - задаете всем элементам рамку и смотрите какой элемент выходит за контейнер

*{
border: 1px solid red;
}
READ ALSO
css vs svg для создания простых изображений
CSS

css vs svg для создания простых изображений

На странице требуется создать несколько (не больше сотни точно, скорее десяток) интерактивных рисунков (надписи и некоторые элементы могут...

 242
Что не так с синтаксисом MySQL?
MySQL

Что не так с синтаксисом MySQL?

К примеру есть такой SQL запрос, пример:

 232
Определение положения ToolTip относительно PlacementTarget
c#

Определение положения ToolTip относительно PlacementTarget

Доброго времени сутокВожусь с собственным представлением ToolTip

 198
Как сгенерировать числа c#
c#

Как сгенерировать числа c#

Доброго времени суток! Как сгенерировать числа для стекаФункция Generate - ввыводит, но потом не могу отобразить ее через Display()

 226