Почему некоторые блоки не во всю ширину на моб. устройствах?

Question

[Worddoc]

Здравствуйте.
Проблема в том, что на десктопе всё нормально отображается, а как захожу с мобильного, главный блок под меню и футер растянуты не на всю ширину. Вьюпорт не подключен, резиновую вёрстку не делал, но я не понимаю, в чём дело, помогите!)

<header>
		<div class="input-play"><i class="icon-play-circled2"></i></div>
		<video src="video/guardians.mp4" poster="img/main2.jpg" id="video"></video>
		<div class="bottom-line">
			<div><p>PUBLISHED <span>FEB 20, 2014</span></p></div>
			<div><p>UPDATED <span>FEB 20, 2014</span></p></div>
			<div><p>RATING</p><i class="icon-star-1"></i><i class="icon-star-1"></i><i class="icon-star-1"></i><i class="icon-star-1"></i><i class="icon-star"></i></div>
			<div class="download"><i class="icon-download"></i><p>564</p></div>
			<div class="comments"><i class="icon-comment-alt"></i><p>21</p></div>
			<div class="like"><i class="icon-heart"></i><p>2,548</p></div>
		</div>
</header>

<footer>
	<div class="container">
		<p>Все права защищены 2016 (с)</p>
		<div class="social">
			<a target="_blank" href="http://vk.com/"><i class='icon-vkontakte'></i></a>
			<a target="_blank" href="http://facebook.com"><i class='icon-facebook'></i></a>
			<a target="_blank" href="http://twitter.com"><i class='icon-twitter'></i></a>
			<a target="_blank" href="http://linkedin.com"><i class='icon-linkedin'></i></a>
			<a target="_blank" href="http://github.com"><i class='icon-github'></i></a>
		</div>
	</div>
</footer>

Выложил HTML только проблемных блоков.

header {
  height: 600px;
  width: 100%;
  position: relative;
  background: #130C04;
  text-align: center;
  video {
    z-index: 998;
    height: 600px;
    width: 100%;
    display: inline-block;
  }
  .input-play {
    cursor: pointer;
    z-index: 1000;
    width: 70px;
    height: 70px;
    position: absolute;
    right: 0;
    top: 0;
    background: black;
    text-align: center !important;
    border: 2px solid darken(red, 10%);
    border-bottom-left-radius: 20px;
    border-top: none;
    &:hover {
      background: darken(red, 10%);
    }
    &:hover i {
      color: white;
    }
    i {
      color: darken(red, 10%);
      font-size: 20px;
      display: inline;
      line-height: 70px;
    }
  }
  .bottom-line {
    z-index: 999;
    height: 50px;
    width: 100%;
    background: rgba(0,0,0,.5);
    position: absolute;
    bottom: 0;
    padding-left: 40px;
    padding-right: 40px;
    text-align: left !important;
    div:nth-child(1) ,div:nth-child(2) ,div:nth-child(3) {
      margin-right: 25px;
    }
    div:nth-child(3) i:nth-of-type(1) {
      margin-left: 10px;
    }
    .like ,.comments ,.download {
      float: right;
      margin-left: 15px;
    }
    div {
      display: inline-flex;
      height: 50px;
      i {
        display: inline-block;
        color: #D8232A;
        line-height: 50px;
      }
    }
    p {
      @include text (18px,OpenSansBold,400,white,50px);
      margin: 0;
      span {
        color: #931B1B;
      }
    }
  }
}


footer {
  width: 100%;
  height: 100px;
  background: #2D2217;
  margin-top: 22px;
  .container {
    height: 100%;
    padding-right: 22px;
    padding-left: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      @include text (15px,OpenSansRegular,400,white,100px);
      float: left;
      margin: 0;
    }
    .social {
      display: flex;
      justify-content: space-between;
      a {
        text-decoration: none;
        width: 40px;
        height: 40px;
        line-height: 40px;
        justify-content: center;
        color: white;
        float: right;
        display: inline-flex;
        margin: 0 10px;
        @include transition (all .2s);
        @include border (100px);
        &:hover {
          background: white;
          color: #0077B5;
        }
      }
    }
  }
}

Answer 1

[Andrew Floatrx]

CSS фреймворки используешь? посмотри на класс .container что в нем...
также попробуй добавить правило

.container{
    min-width:100vw;
}