Из-за чего могут быть такие большие отступы при просмотре с мобильного? Появляются после добавления meta тега "viewport"
Есть такой тег для работы с мобильными устройствами:
Когда его прописываю, у меня огромные отступы справа. Не знаю, из-за чего, ведь фиксированной ширины у меня нигде нет, только высота одна есть фиксированная. Не понимаю, в чем проблема тут?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Project 1</title>
<!--Normalize CSS -->
<link rel="stylesheet" href="styles/normilize.css">
<!--Style -->
<link rel="stylesheet" href="styles/main.css">
<!--Шрифты -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Open+Sans&family=Roboto+Condensed:wght@700&display=swap" rel="stylesheet">
<!--Иконки-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<meta name="viewport" content="width=device-width initial-scale=1">
</head>
<body>
<!--HEADER-->
<header>
<div class="header__top">
<div class="container">
<div class="header__inner">
<div class="logo">
<div class="white">
</div>
<div class="blue">
CS
</div>
</div><!--Логотип -->
<ul class="nav">
<li><a href="">Home</a></li>
<li><a href="">Page</a></li>
<li><a href="">Features</a></li>
<li><a href="">Extensions</a></li>
<li><a href="">Tutorials</a></li>
<li><a href="">Contact us</a></li>
</ul><!--Навигация-->
<div class="social">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-skype" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<div class="intro">
<div class="container">
<div class="intro__inner">
<h1 class="intro__title">Creatives</h1>
<h2 class="intro__subtitle">Power by PSDfreebies.com</h2>
<div class="chevron">
<p class="scrollDown">Scroll Down</p>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
</div>
</div>
</div><!--Intro-->
</header><!--HEADER-->
<!--ABOUT-->
<section class="about__area">
<div class="container">
<div class="area__title">
<h2 class="suptitle__area">We are an awesome agency</h2>
<p class="letter">w</p>
</div>
<div class="about__features">
<div class="features__item">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
<h2>Feature one</h2>
<p>Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus </p>
</div>
<div class="features__item">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
<h2>Feature one</h2>
<p>Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus </p>
</div>
<div class="features__item">
<i class="fa fa-search" aria-hidden="true"></i>
<h2>Feature one</h2>
<p>Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus </p>
</div>
<div class="features__item">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
<h2>Feature one</h2>
<p>Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus </p>
</div>
</div>
</div>
</section><!--ABOUT-->
<!--NEWS AREA -->
<section class="news__area area">
<div class="news">
<div class="news__text">
<div class="container">
<div class="news__date"><span>Jan4, 2016</span><span>In Culture</span></div>
<h2 class="news__title">Akita inu dog</h2>
<div class="news__desc">
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur </p>
</div>
</div>
</div>
<img src="img/news/news1.jpg" alt="">
</div>
<div class="news">
<img src="img/news/news2.jpg" alt="">
<div class="news__text">
<div class="container">
<div class="news__date"><span>Jan4, 2016</span><span>In Culture</span></div>
<h2 class="news__title">Akita inu dog</h2>
<div class="news__desc">
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur </p>
</div>
</div>
</div>
</div>
</section><!--NEWS AREA -->
<!--BLOG AREA -->
<section class="blog__area area">
<div class="container">
<div class="area__title">
<h2 class="suptitle__area">Let's blog</h2>
<p class="letter">b</p>
</div>
<p class="subtitle__area">We love clean design and anvanced digital solutions.</p>
<div class="blog__inner">
<div class="blogs__item">
<img class="blog__photo" src="img/blog/blog1.jpg" alt="blog">
<h2 class="blog__name">Fresh summer campaign</h2>
<div class="blog__text">
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Vivamus sagittis lacus vel augue</p>
</div>
</div>
<div class="blogs__item">
<img class="blog__photo" src="img/blog/blog2.jpg" alt="blog">
<h2 class="blog__name">Fresh summer campaign</h2>
<div class="blog__text">
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Vivamus sagittis lacus vel augue</p>
</div>
</div>
<div class="blogs__item">
<img class="blog__photo" src="img/blog/blog3.jpg" alt="blog">
<h2 class="blog__name">Fresh summer campaign</h2>
<div class="blog__text">
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Vivamus sagittis lacus vel augue</p>
</div>
</div>
<div class="blogs__item">
<img class="blog__photo" src="img/blog/blog4.jpg" alt="blog">
<h2 class="blog__name">Fresh summer campaign</h2>
<div class="blog__text">
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Vivamus sagittis lacus vel augue</p>
</div>
</div>
</div>
</div>
</section><!--BLOG AREA -->
<!--QUICK -->
<section class="quick">
<div class="container">
<div class="quick__inner">
<div class="action">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
<p class="action__text">
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
</div>
<div class="action">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
<p class="action__text">
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
</div>
</div>
</div>
</section><!--QUICK -->
<!--KEY FEATURE -->
<section class="key">
<div class="container">
<div class="key__inner">
<div class="key__text">
<div class="container">
<h2 class="key__title">Akina inu dog</h2>
<p class="key__desc">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<div class="list">
<div>Fully responsive design</div>
<div>Hihh quality code</div>
<div>Diffetent headers & layout</div>
</div>
</div>
</div>
<div class="key__img"><img src="img/iphone.png" alt=""></div>
</div>
</div>
</section><!--KEY FEATURE -->
<!--TEAM -->
<section class="team area">
<div class="container">
<div class="area__title">
<h2 class="suptitle__area">Our team</h2>
<p class="letter">t</p>
</div>
<p class="subtitle__area">Sales long tail influencer pitch release niche market.</p>
<div class="team__inner">
<div class="team__item">
<img class="team__photo" src="img/team/team1.jpg" alt="">
<div class="team__info">
<p class="team__name">John Snow</p>
<p class="team__prof">CEO</p>
</div>
</div>
<div class="team__item">
<img class="team__photo" src="img/team/team2.jpg" alt="">
<div class="team__info">
<p class="team__name">Lady Sansa</p>
<p class="team__prof">WebDesigner</p>
</div>
</div>
<div class="team__item">
<img class="team__photo" src="img/team/team3.jpg" alt="">
<div class="team__info">
<p class="team__name">Dadiv Smith</p>
<p class="team__prof">Photographer</p>
</div>
</div>
<div class="team__item">
<img class="team__photo" src="img/team/team4.jpg" alt="">
<div class="team__info">
<p class="team__name">Lady Sansa</p>
<p class="team__prof">Photographer</p>
</div>
</div>
</div>
</div>
</section><!--TEAM -->
<!--Contant area -->
<section class="contact__area">
<div class="container">
<div class="area__title">
<h2 class="suptitle__area">We'd love to hear about your project</h2>
<p class="letter">c</p>
</div>
<form class="contact" action="">
<div class="contact__info">
<div class="contact__item"><input type="text" placeholder="Name"></div>
<div class="contact__item"><input type="text" placeholder="Email"></div>
<div class="contact__item"><input type="text" placeholder="Phone"></div>
</div>
<div class="contact__message">
<textarea name="message" placeholder="Message" cols="30" rows="10"></textarea>
</div>
<div class="contact__btn"><input type="submit" value="Submit"></div>
</form>
</div>
</section>
<!--MAP -->
<section class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d45064.481278141175!2d39.010304!3d45.095321600000005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sru!2sru!4v1590429350326!5m2!1sru!2sru" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</section><!--MAP -->
<!-- FOOTER -->
<section class="footer">
<div class="container">
<div class="footer__inner">
<p>© 2016 PSDfreebies.com – All Right Reserved</p>
<p><img src="img/footer.png" alt=""></p>
</div>
</div>
</section>
</body>
</html>
CSS
*,
*:after,
*:before {
margin:0;
padding:0;
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6{
margin:0;
padding:0;
}
p, span{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
body{
font-family: 'Montserrat', sans-serif;
font-size: 15px;
}
.container{
width: 100%;
max-width: 1230px;
margin:0 auto;
padding:0 15px;
}
/*=======================================================*/
/*HEADER
==========================*/
header{
background: #2e2e2e url(../img/backgrounds/hdrback.jpg) center top no-repeat;
background-size: cover;
}
.header__top{
border-bottom: 1px solid #7f7f7f;
padding:30px 0 16px 0;
}
.header__top .header__inner{
display: flex;
align-items: center;
justify-content: space-between;
}
/*Logo*/
.logo{
position: relative;
}
.blue{
position: absolute;
top: -8px;
left: -12px;
background: #11749e;
color:#fff;
font-size: 30px;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
padding:1rem 1rem;
}
.white{
padding:33px 33px;
background: #fff;
opacity: .6;
}
/*Navigation*/
.nav{
list-style: none;
display: flex;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
}
.nav li{
position: relative;
display:inline-block;
margin-left: 1.5em;
}
.nav a{
color: #fff;
padding:0 0.6em;
}
/*Navigation hover*/
.nav li:after {
content: " ";
position: absolute;
display: block;
visibility: hidden;
opacity: 0;
height: 6px;
width: 100%;
background: #11749e;
margin-top: 32px;
transition: .2s;
}
.nav li:hover:after {
visibility: visible;
opacity: 1;
}
/*Social*/
.social a{
margin-left: 1.25em;
color:#fff;
font-size: 20px;
transition: .2s;
}
.social a:hover {
color: #11749e;
padding:100px 0;
}
/*INTRO
==========================*/
.intro{
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
padding-top: 250px;
padding-bottom: 100px;
}
.intro__inner{
width: 100%;
max-width: 970px;
margin:0 auto;
text-align: center;
}
.intro__title{
font-weight: 700;
font-size: 152px;
text-transform: uppercase;
color:#fff;
}
.intro__subtitle{
font-size: 25px;
color: #11749e;
text-transform: uppercase;
letter-spacing: 20px;
margin-bottom: 110px;
}
.scrollDown{
color:#fff;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
margin-bottom:20px;
}
.chevron i{
color:#fff;
font-size: 20px;
border: 1px solid #fff;
border-radius: 100%;
padding: 20px 20px;
transition: .2s;
cursor: pointer;
}
.chevron i:hover {
background: #fff;
color:#11749e;
}
/*ABOUT
==========================*/
.about__area{
background:#11749e;
padding:100px 0;
}
.area__title{
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.area__title .suptitle__area{
position: absolute;
color:#fff;
font-size: 37px;
font-weight: 500;
text-transform:uppercase;
}
.area__title .letter{
color:#3c8daf;
font-size: 247px;
text-transform:uppercase;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
}
/*Features*/
.about__features{
display: flex;
flex-wrap: wrap;
}
/*Feature item*/
.features__item{
width: 25%;
padding:0 15px;
text-align:center;
color:#fff;
}
.features__item i{
font-size: 40px;
background: #2e85aa;
padding:40px 40px;
border-radius:100%;
margin-bottom:24px;
}
.features__item h2{
font-size: 18px;
font-weight: 500;
text-transform: uppercase;
margin-bottom:30px;
}
.features__item p{
font-size: 15px;
line-height: 1.6;
}
/* NEWS AREA
==========================*/
.news{
display: flex;
}
.news > div, .news img{
width: 50%;
}
/*News text*/
.news__text .container{
width: 100%;
max-width:470px;
margin:0 auto;
}
.news__text{
display: flex;
align-items: center;
background:#222;
color: #fff;
}
.news__text:last-child {
color: #000;
background: #fff;
}
.news__text:last-child .news__date span:first-child {
border-right: 1px solid #000;
}
/*News date*/
.news__date{
font-size: 13px;
margin-bottom: 20px;
}
.news__date span:first-child {
border-right: 1px solid #fff;
padding-right: 12px;
}
.news__date span:last-child {
padding-left: 12px;
}
/*News title*/
.news__title{
text-transform: uppercase;
font-size: 25px;
margin-bottom: 40px;
}
/*News desc*/
.news__desc p:first-child {
font-size: 15px;
margin-bottom: 35px;
}
/* BLOG AREA
==========================*/
.blog__area{
padding:100px 0 70px;
}
.blog__area .suptitle__area{
color:#000;
}
.blog__area .letter{
color: #d7d7d7;
}
.subtitle__area{
font-size: 30px;
text-align: center;
}
/*blogs*/
.blog__inner{
display: flex;
flex-wrap: wrap;
margin-top:70px;
}
.blogs__item{
width: 25%;
margin-bottom: 30px;
text-align: center;
padding:0 15px;
}
.blog__photo{
display: block;
max-width:100%;
height: auto;
margin-bottom: 40px;
}
.blog__name{
font-size: 18px;
color: #11749e;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 20px;
}
.blog__text {
color:#222;
font-size: 15px;
line-height: 1.6;
}
/*QUICK
==========================*/
.quick{
background: #11749e;
padding:100px 0;
}
.quick__inner{
display: flex;
}
.action{
color:#fff;
display: flex;
align-items: center;
width: 50%;
padding:0 15px;
margin:0 -15px;
}
.action i, .action p{
padding:0 15px;
}
.action__text{
font-size: 15px;
}
.action i{
font-size: 60px;
}
/*KEY FEATURE
==========================*/
.key{
background: url(../img/backgrounds/keyback.jpg) center top no-repeat;
background-size: cover;
padding:100px 0;
}
.key__inner{
display: flex;
align-items: center;
}
.key__inner > div{
width: 50%;
padding:0 15px;
}
/*text*/
.key__text{
color:#fff;
font-size: 15px;
}
.key__text .container{
width: 100%;
max-width:470px;
margin:0 auto;
}
.key__title{
text-transform:uppercase;
font-size: 25px;
margin-bottom:40px;
}
.key__desc{
margin-bottom:70px;
line-height: 1.6;
}
/*list*/
.list{
width: 370px;
font-weight: 500;
text-transform: uppercase;
}
.list div{
background: #11749e;
margin-bottom:30px;
width: 100%;
padding:13px 0 13px 20px;
}
.list > div:nth-child(2) {
width: calc(100% + 30px);
}
.list > div:last-child {
width: calc(100% + 60px);
}
/*image*/
.key__img{
text-align: center;
}
/*TEAM
==========================*/
.team{
padding:0 0 120px;
}
.team .letter{
color:#d7d7d7;
}
.team .suptitle__area{
color:#000;
}
.subtitle__area{
margin-bottom: 60px;
}
/*team*/
.team__inner{
display: flex;
flex-wrap: wrap;
}
.team__item{
position: relative;
width: 25%;
padding:0 15px;
}
.team__photo{
display: block;
max-width: 100%;
height: auto;
}
/*Team info*/
.team__info{
position: absolute;
text-align: center;
background: #fff;
padding:24px 40px 50px 40px;
left: 14%;
bottom: -18%;
}
.team__name{
font-size: 20px;
font-weight: 500;
text-transform:uppercase;
color:#11749e;
margin-bottom: 14px;
}
.team__prof{
font-size: 15px;
font-weight: 500;
}
/*Contact area
==========================*/
.contact__area{
background: url(../img/backgrounds/cntback.jpg) center top no-repeat;
background-size: cover;
padding:100px 0;
}
/*=========================*/
.contact__area .letter{
color:#d7d7d7;
opacity: .2;
}
/*Form*/
/*info*/
.contact__info{
display: flex;
flex-wrap: wrap;
margin:0 -15px;
margin-bottom:40px;
}
.contact__item{
width: 33.333333%;
padding:0 15px;
}
.contact__info input{
background: transparent;
outline: none;
border:1px solid #fff;
padding:16px 0 16px 20px;
font-size: 15px;
color: #fff;
width: 100%;
}
/*message*/
.contact__message{
margin-bottom: 40px;
}
.contact__message textarea{
resize: none;
background: transparent;
outline: none;
border:1px solid #fff;
width: 100%;
color:#fff;
padding:16px 20px;
}
.contact__btn{
text-align: center;
}
.contact__btn input{
background: #11749e;
outline: none;
border:none;
text-transform:uppercase;
color:#fff;
font-size: 24px;
font-weight: 500;
padding:18px 60px 24px;
cursor: pointer;
}
/*MAP
==========================*/
.map{
height: 333px;
}
iframe{
width: 100%;
height: 100%;
}
/*FOOTER
==========================*/
.footer{
background: #222;
}
.footer__inner{
display: flex;
align-items: center;
justify-content: space-between;
color:#fff;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
padding:50px 0;
}
.footer__inner p{
padding:0 15px;
}