Что не так с моим кодом, и как это изменить?
1. Привыкайте выкладывать превью вашей верстки в сервисы по типу codepen, jsfiddle или github pages. Никто не будет клонировать вашу верстку на локальный ПК, чтобы что-то там проверить.
2. Привыкайте давать осознанные, читаемые id и class. В более сложной верстке вы потом сами забудете какой класс или id у вас за что отвечает. У вас сейчас так:<figure id="h">
3. Если у вас пустая ссылка - в href ставьте #. Таким образом вы избежите неожиданностей в виде внезапно изменившегося стиля ссылки в случае, если ваш макет внезапно пойдёт в продакшн и ссылки реально будут вести на какую нибудь страницу. У вас так:<a href="" class="twit"></a>
4. Приступайте к более сложным макетам.
1) У тега html нет lang.
2) Почитайте про различные мета теги, для чего нужны и как использовать. (так же в консоли во вкладке аудит можно посмотреть свои ошибки)
3) Проверьте код валидатором и исправьте то, что будет
4) Пока не поздно - изучите БЭМ. Это упростит верстку и все встанет по полочкам (либо другую методологию). Соответсвенно уйдут стили на теги и id.
5) Настройте свлю среду разработки на авто форматирование кода, почитайте рекомендации (мне нравится от airbnb)
6) Вместо картинок попробуйте подключать иконочные шрифты, либо используйте svg, либо спрайт из иконок png. (но на данном этапе это не приципиально)
7) Посмотрите список форматов шрифтов,  которые нужны для разных браузеров и, собственно, подключите их по вашим требованиям.
8) Старайте не писать все стили в одном файле (на будущее почитайте, например, sass 7-1 pattern)
Если есть вопросы,  пиши (контакты в профиле)