Максим Иванов

https://jsfiddle.net/16jfut8z/5/

Потому-что вы не задали обтекаемость.

сам придумывай - это же элементарно
в ином случае игнорируй все, что касается JS
Ну и верстальщик без JS - не верстальщик
Верстка это как два пальца, можно за неделю-две научиться всему что надо и потом постигать остальное на практике.
Лучше сразу с JS работай. И даже не думай о jQuery, только посмей притронуться к библиотеке, не научившись нативному JS. Я прослежу.

Используется "схлопывание отступов"
Варианты:
1. .middle-page { display: flex; }
2. .middle-page .main-middle-page { float: left; }

в css добавить

p{
   margin: 0;
}

.navigation ul {
  margin: 0;
}

body {overflow: hidden; }

* {box-sizing: border-box;}

box-sizing

Это не C++, а математическая нотация. В данном случае `!` означает факториал.

А в C++ `!` является оператором логического отрицания.

Скажите, а вот если бы Вы, скажем, начинали заниматься каратэ - Вы бы тоже искали обязательно единственного в мире шаолиньского мастера с 20-м даном? Читайте любую книгу и не парьте мозг. Вам ещё много книг предстоит прочитать, в каждой что-то будете открывать для себя.

P.S. Основная "книга" - это Python 3.6.3 documentation.