Eugene Chefranov

Так может шрифт в принципе не поддерживает русский?
и так будет немного правильнее записывать:

@font-face {
 font-family: 'Dited';
 src: url("macroman/Dited-webfont.woff") format('woff');
}

p {
  font-family: 'Dited', sans-serif;
}

вьюпорт у страницы есть?

<meta name="viewport" content="width=device-width, initial-scale=1">

Собирайте через сборщик типа Gulp, header и footer будут компонентами. Будете только в компоненте править, а применятся будет ко всем страницам

Ну такое лучше всего проворачивать через сборщик типа Gulp. У вас будет компонент header котрый будете менять в одном месте.

Потому что img это строчный элемент и на него не действует margin

Если есть API у тех сайтов с которых хотите тянуть, то можно с помощью JS или PHP тянуть

Так?

Попробуйте сделать на flex

https://ourcodeworld.com/articles/read/282/how-to-...
https://medium.com/@jh3y/how-to-where-s-the-caret-...

.submenu{
  width: 100%;
  position: absolute;
  margin: 0;
  padding: 0;
  display: none;
  text-align: justify;
}

https://www.sitepoint.com/10-jquery-syntax-highlig...
https://prismjs.com/

.welcome h1 {
  text-align: center;
}

Конечно margin не работает. вы ж его абсолютом сделали. Делайте флексами, контейнеру

display: flex; justify-content: center; align-items: center;

а внутреннему элементу необходимый размер.