Damir Aushenov

https://codepen.io/Zoxon/pen/BJgrt

я бы в свой верстки такой бы код использовал

<article class="page-article">
    <header class="page-article__header">
     <div class="article-title">
       <h1 class="article-title__title">Hello,world</h1>
       <span class="article-title__meta">Lorem ipsum dolor.</span>
     </div>
    </header>
    <div class="page-article__image">
      <div class="article-image">
        <img src="https://static.jsbin.com/images/dave.min.svg" alt="" class="article-img" alt="" class="article-image__image">
      </div>
    </div>
    <div class="page-article__content">
      <p class="article-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos veniam rem nihil qui facilis dolores labore repellat, voluptate asperiores rerum!</p>
      </p>
    </div>   
  </article>

Использовать div имеет смысл если в дизайне есть элементы которые находятся снаружи div.wrapper

Там для позиционирования используют position, что не есть хорошо
Нужно переверстать макет

https://jsfiddle.net/arqcvhsa/2/
там достаточно указать text-align: center;

Решение проблемы https://github.com/emmetio/emmet/issues/406#issuec...

codepen.io/Guilh/pen/ILJAl

Есть ли отрицательный padding?

Возможно есть аналог какой-то?

нет
margin может быть отрицательным

Нужно фото растянуть по ширине. width и height не подходит так как фото в другом фото

можно код посмотреть?

https://www.google.com/search?q=vagrant&oq=vagrant...
ну или как вариант chrome livereload extension

сверху вариант посимпатичнее
вот вам еще один через inline-block
jsfiddle.net/yespeace/1dj9wczc

<div class="cinema">
    <div class="cinema__text">Скоро в кино</div>
    <div class="cinema__line"></div>
    <div class="cinema__button"><button>Смотреть все</button></div>
</div>

.cinema {
	width: 1000px;
    margin: 0 auto;
	
}
.cinema__line {
	background-color:#263238;
	width: 400px;
	display: inline-block;
	height:1px;
	vertical-align: middle;
	
}
.cinema__button {
	display: inline-block;
	width: 100px;
}
.cinema__text {
	display: inline-block;
	width:100px;
}

Здравствуйте. Никто не прав, никто не виноват.

Далее уже начинается то что дизайн сделан не по разметке bootstrap

Обратите внимание сюда. Возможно вы верстаете не по идеологии фреймворка

И Почти всегда он негодует по поводу Bootstrap,объясняя все тем,что много лишних классов,всего лишнего,не понятного

Может и здесь кроется причина, возможно вам стоит делать верстку более понятной

Bootstrap действительно - крутой, но использовать его нужно с умом ведь да

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

<div class="row">
    <div class="col-md-4">
        <h2>Левый блок</h2>
        <p>................</p>
    </div>
    <div class="col-md-4 col-md-offset-4">
        <h2>Правый блок</h2>
        <p>................</p>
    </div>
</div>

col-md-offset-4 Будет смещать блок в права

jsfiddle.net/xkwppsyb

попробуйте npm install lodash._isnative