Zvezdocheteg

Потому что position: relative; влияет на окружение верстки (поток)

чтобы не влияло на поток верстки, как то так:

.hoodi-two-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
}
.hoodi-two {
  position: absolute;
  left: 50px;
  bottom: 50px;
}

Да и у вас там свойство widows: 100%, такого вроде в сss нет =) Наверное перепутали с width

Используй классы в наименование элементов, а id это уникальное имя элемента которое в документе может использоваться только один раз. Я смотрю пытался использовать его несколько раз в секции контент вот из за этого и не вышло.
!important использовать очень плохо !
Вертикальные margin элементам которые расположены друг под другом лучше задавать с низу (то есть толкать элемент лежащий ниже), таким как у тебя в секции блог.
Социальные иконки лучше делать через список ul > li > a , выравнивание применять к li, остальные стили к "a".

Пройди курсы на https://htmlacademy.ru/courses , там самая основа, и потом еще сверстай макет на закрепление.
И вот чеклист по верстке на будущее https://github.com/delka/html5checklist/

да и советую освоить гитхаб чтобы туда выкладывать свою верстку, да и вообще полезная штука.
Удачи в обучении старт положен это главное !!))

Как вариант можно сделать обертку и ограничить ей ширину или применить ограничения к самому h1. Слышал тэг < br > не рекомендуют использовать , но это всего лишь слухи)

вот пример: codepen.io/Profiteer/pen/qbbgBp

Как по мне то с flex' oм можно работать уже сейчас, по крайне мере знакомиться, будущее за ним.

Flexbox собственно и был придуман для построения структуры сайта. И более простого манипулирования элементами структуры. С чем как мне кажется он справляется просто прекрасно ))
Использовал уже, пока ток на своих локальных проектах, был очень доволен . Да и с ним открыты просторы для экспериментов.

Да и в 4й версии бутстрапа будет добавлены полноценные фишки на Flexbox ( v4-alpha.getbootstrap.com/getting-started/flexbox ) . Что еще больше продвинет в массы flexbox модель.