Появление горизонтального скролла

Question

Всем привет, появился горизонтальный отступ, не пойму из-за чего.

head, body {
    margin: 0;
    padding: 0;
}

.header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 72px;
    background-color: #000000;
}

.logo {
    padding-left: 150px;
}

.navigation {
    flex-grow: 1;
    padding-right: 148px;
}

.menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.menu li {
    padding-left: 45px;
    color: #ffffff;
    list-style: none;
    opacity: 0.69;
}

.form_template {
    background-color: #9a9a9a;
    height: 713px;
    display: flex;
    align-items: center;
}

.inner {
	flex-direction: column;
	max-width: 50%;
}

.logo1 {
	padding-left: 150px;
}

.title {
    height: 70px;
    color: #ffffff;
    font-family: 'Raleway', sans-serif;
    font-size: 36px;
    font-weight: 300;
    text-transform: uppercase;
    padding-top: 30px;
    padding-bottom: 80px;
    padding-left: 150px;
    max-width: 100%;
}

.title:after {
	margin-top: 35px;
	content: '';
	display: block;
	width: 74px;
	height: 2px;
	background-color: white;
}


.text {
	padding-left: 150px;
	padding-bottom: 45px;
    height: 61px;
    color: #ffffff;
    opacity: 0.8;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 23px;
    max-width: 70%;
}



.download {
	background: none;
	margin-left: 150px;
    width: 135px;
    height: 42px;
    border: 2px solid white;
    color: white;
    font-weight: 400;
    font-size: 15px;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
}

.free_trial {
	padding-top: 30px;
	padding-left: 222px;
	display: flex;
	flex-direction: column;
    align-items: center;
    width: 360px;
    height: 363px;
}

.trial {
	background-color: #f5f5f5;
	margin: 0;
	width: 360px;
    height: 54px;
    align-items: center;
    display: flex;
    color: #333333;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    justify-content: center;
}

.span {
	color: #ff8b38;
}

.form-inner input {
	padding-left: 10px;
    border: none;
	border-bottom: 1px solid #dbdbdb;
	width: 285px;
	height: 31px;
}

.form-inner {
	display: flex;
	align-items: center;
    justify-content: space-between;
	flex-direction: column;
	width: 360px;
	height: 365px;
	background-color: white;
}

.get_started {
	width: 360px;
	height: 54px;
	background-color: #ff9b51;
	color: white;
	font-size: 15px;
	font-weight: 400;
	font-family: 'Open Sans', sans-serif;
	border: none;
}

.wrapper {
	display: flex;
	flex-direction: row;
	max-width: 1400px;
	height: 105px;
	background-color: white;
}

.title1 {
	padding-top: 20px;
	padding-bottom: 12px;
	padding-left: 152px;
	font-size: 20px;
	font-weight: 700;
	color: #333333;
	font-family: 'Open Sans', sans-serif;
}

.text1 {
	padding-left: 152px;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: #86878b;
	font-family: 'Open Sans', sans-serif;
	max-width: 50%;
}

.wrapper_icons {
	display: flex;
	align-items: center;
}

.wrapper_icons img {
	height: 60px;
	width: 45px;
	margin-right: 60px;
}

.wrapper_inner {
	display: flex;
	flex-direction: column;
}

.tabs {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-top: 22px;
	max-width: 100%;
	height: 595px;
	background-color: #f5f5f5;

}

.tabs_inner {
	padding-right: 100px;
	margin-left: 142px;
	margin-top: 22px;
	flex: 0 1 33.333%

}

.tab {
	margin-top: 1px;
	width: 112px;
	height: 112px;
	line-height: 112px;
	background-color: #333333;
	text-align: center;
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	font-family: 'Open Sans', sans-serif;
}

.tab:hover{
	transition: .2s;
	background-color: #ff8b38;
}

.soft_effect {
	display: flex;
	flex-direction: row;
}

.soft_effect_inner {
	padding-right: 100px;
}

.title2 {
	padding-bottom: 50px;
	width: 344px;
	height: 21px;
	font-weight: 700;
	font-size: 20px;
	color: #000000;
	font-family: 'Open Sans', sans-serif;
}

.text2 {
	width: 476px;
	height: 132px;
	color: #86878b;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	padding-bottom: 50px;
}

.Download1 {
	width: 121px;
	height: 46px;
	background-color: #ff8b38;
	border: none;
	color: white;
	font-size: 15px;
	font-weight: 400;
	line-height: 20px;
	font-family: 'Open Sans', sans-serif;
}

.tabs_image {
	height: 253px;
	padding-right: 148px;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<title>AX IT</title>
	<link rel="stylesheet" type="text/css" href="AXIT.css">
	<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:600&display=swap" rel="stylesheet">

</head>
<body>
	<!-- Header -->
	<header class="header">
			<div class="logo">
				<img src="img/Logo.png">
			</div>
			<nav class="navigation">
				<ul class="menu">
					<li>Features</li>
					<li>About</li>
					<li>Pricing</li>
					<li>Reviews</li>
					<li>Contact</li>
				</ul>
			</nav>
	</header>
	<!-- Form -->
	<section class="form_template">
		<div class="inner">
		    <div class="logo1">
		    	<img src="img/Logo1.png">
		    </div>
			<div class="title">
				MODERN AXURE TEMPLATE
                FOR BEAUTIFUL PROTOTYPES
			</div>
			<div class="text">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
                euismod bibendum laoreet. Proin gravida dolor sit amet lacus
                accumsan et viverra justo commodo.
			</div>
			<button class="download">
				Download
			</button>
		</div>
			<form class="free_trial">
				<div class="form-inner">
				     <p class="trial">Try Your<span class="span">&nbsp;FREE&nbsp;</span>Trial Today</p>
			   
				     <input type="text" name="1" placeholder="Name">
				     <input type="text" name="2" placeholder="Email">
				     <input type="text" name="3" placeholder="Password">
				     <button class="get_started">
				     	Get started
				     </button>
			    </div>
			</form>
	</section>
	<!-- Media -->
	<section class="social_media">
        <div class="wrapper">
        	<div class="wrapper_inner">
		         <div class="title1">
			      Social Media
		         </div>
		         <div class="text1">
			      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                  Aenean euismod bibendum laoreet.
		         </div>
		    </div>
		     <div class="wrapper_icons">
			     <a href=""><img src="img/facebook.png"></a>
			     <a href=""><img src="img/twitter.png"></a>
			     <a href=""><img src="img/pinterest.png"></a>
			     <a href=""><img src="img/google-plus.png"></a>
			     <a href=""><img src="img/instagram.png"></a>
			     <a href=""><img src="img/youtube.png"></a>
		     </div>
		</div>
	</section>
	<!-- Tabs -->
    <section class="tabs">
		<div class="tabs_inner">
			<div class="tabs_column">
				<div class="tab">TAB 1</div>
				<div class="tab">TAB 2</div>
				<div class="tab">TAB 3</div>
			</div>
		</div>
		<div class="soft_effect">
			<div class="soft_effect_inner">
				<div class="title2">
					Tabs with soft transitioning effect.
				</div>
				<div class="text2">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
                    bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
                    justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
                    penatibus et magnis dis parturient montes.<br><br>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
                    bibendum laoreet.
				</div>
				<button class="Download1">
					Download
				</button>
			</div>
			<div class="tabs_image">
				<img src="img/image_right_u255.png">
			</div>
		</div>
	</section>
	<!-- List section -->
	<section class="list_section">
		list
	</section>
	<!-- Picture section -->
	<section class="picture_section">
		picture
	</section>
	<!-- Awesome -->
	<section class="awesome">
		awesome
	</section>
	<!-- Prices -->
	<section class="prices">
		prices
	</section>
	<!-- Reviews -->
	<section class="reviews">
		reviews
	</section>
	<!-- Design-->
	<section class="design">
		design
	</section>
	<!-- Contact form-->
	<section class="contact_form">
		contact form
	</section>
	<footer class="footer">
		footer
	</footer>
</body>
</html>

Answer 1

Выражайте опрос правильнее, приходится голову ломать про какой Отступ идет речь. Чтобы убрать горизонтальный скролл для тега body пропишите в стилях overflow-x: hidden; http://htmlbook.ru/css/overflow

Также позже я заметил эту часть кода. Этот padding и создает тот отступ справа! .navigation { flex-grow: 1; padding-right: 148px; }

БЛОГ НА HUSL

Появление горизонтального скролла

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