Pierwsza rzecz, która rzuca mi sie w oczy to nieprawidłowe wykorzystanie <h1>, tag <h1> ma reprezentować najwyższy poziom nagłówka, ma być tylko jeden taki tag w kontekście strony, i ma być on na samej górze hierarchii nagłówków, podczas, gdy u ciebie <h1> znajduje się na tej samej wysokości co <h2> :
<section class="sect-1">
<div class="top">
<h1>Sekcja 1</h1>
</div>
</section>
<section class="sect-2">
<div class="wrap-h2">
<h2>Sekcja 2</h2>
</div>
<div class="wrap-box">
<div class="box box-m box-1">
<h3>Box</h3>
</div>
<div class="box box-m box-2">
<h3>Box</h3>
</div>
<div class="box box-m box-3">
<h3>Box</h3>
</div>
</div>
</section>
W twoim kodzie, <h1> nie jest bardziej ważny("wyższy") niż <h2>, jeden i drugi to nagłówek dla sekcji, <h1> powinien określać główną tematyke strony, więc na stronie głównej tag<h1> powinien zawierać logo/tytuł strony
Druga sprawa to użycie <span> jako przycisk do menu, span to nie jest przycisk(nawet jeśli dzięki css'owi tak wygląda), "przycisk" zbudowany jako span jest niefocusowalny(nie można go zaznaczyć przy pomocy np tabulatora), ponadto użycie <span> sprawia, że przycisk taki nie jest widzialny dla czytników ekranowych - więcej o tym tutaj
Kolejna rzecz, to użycie <span> jako kontenera dla tekstu w stopce, z MDN'owskiej definicji wynika, że <span> jest podstawowym wbudowanym kontenerem dla frazowania treści, który z natury nie reprezentuje niczego. Może być używany do grupowania tekstu w celu stylizacji - obecnie w stopce znajduje się tylko napis "Footer", ale gdyby w takiej stopce w <span> było coś bardziej ważnego np jakiś adres, wtedy nie ma wskazania na to, że dana zawartość jest adresem
Kolejna sprawa to nazewnictwo klas, jest to kwestia indiwidualna, ale zobacz:
<section class="sect-1">
<div class="top">
<h1>Sekcja 1</h1>
</div>
</section>
klasa "top" jest mało znacząca, "top" czego? Wiecej znacząca nazwa klasy w tym przypadku to np "sect-1__header", ktoś kto zobaczy nazwe takiej klasy z automatu skojarzy, że chodzi o nagłówek jakiejś sekcji, natomiast, gdy ktoś widzi klase "top" to taka nazwa na nic kontretnego nie wskazuje. Zachęcam do zapoznania się z BEM'em.
Co do stylowania przy pomocy REM, należy pamiętać, że każda przeglądarka ma troche inny domślny font-size dla root elementu, więc na przeglądarce x 2rem = 32px, ale na przeglądarce y 2 rem może być równe 36px
Tak ogólnie to jeszcze brak <main>, który miał by "otaczać" główną zawartość strony, w <section> można by zamiast divów stosować <article>, porównaj sobie strone WWW do jednej strony z gazety, gazeta ma główną zawartość, podzieloną na sekcje(sekcja sportowa, kulinarna itp) i każda z tych sekcji ma kilka artykułów w sobie(i oczywiście dochodzą do tego nagłówki)
Przykładowa poprawna struktura strony, zobacz, każdy znacznik z punktu widzenia semantyki "coś" znaczy, tak ogólnie to dla ludzkiego oka nie ma znaczenia czy główna treść strony znajduje się w <div>, czy w <main>(jeżeli są tak samo ostylowane), ale dla przeglądarki/czytnika ma to kolosalne znaczenie. Polecam wpisać w google fraze "Comandeer semantyka" i poczytać kilka wpisów na ten temat.
Co do podlinkowanego wcześniej walidatora, to sprawdza on tylko składnie języka(czy tagi są domknięte itp), natomiast nie sprawdza on semantyki(wykorzystania znaczników zgodnie z ich przeznaczeniem), wg tego walidatora nie ma żadnych błędów, co nie jest prawdą, bo np implemantacja przycisku jest nieprawidłowa.
Co do układu strony to ciężko coś powiedzieć, jest to tylko jakiś szablon, ale na pewno + za to, że układ ten dostosowuje się rozmiaru urządzenia