Wie schon geschrieben: das Script taugt nichts. Es fehlen völlig wenigstens ein Hinweis auf flex und grid fürs Layout, für Größen wird immer die falsche Einheit verwendet (kein pt/px verwenden!) und das Thema media-Querys habe ich garnicht gesehen. Welche Seite ich dir empfehlen würde siehst du schon an den Links im Text: SELFHTML.
Dein #wrap-Element ist überflüssig, es gibt schon ein Element das alles umschließt: body. Aber nein, #wrap und footer sind nicht gleich breit: footer hat noch einen Rahmen und der kommt noch auf die Breite drauf - zumindest wenn die Eigenschaft box-sizing nicht auf border-box gesetzt wurde. Allerdings sind deine Breitenangaben ohnehin alle falsch und gehören weg: die Breiten (und auch Höhen) werden vom Browser automatisch gesetzt wenn man grid/flex verwendet. Noch ein Tipp: um Fehler in der Darstellung zu finden sind die Entwicklertools in den Browsern sehr hilfreich, erreichbar sind die idR über F12 bzw. das Kontextmenü ("untersuchen" o.ä.).
Dein HTML-Code enthält übrigens doch einen Fehler: <h3> wird nicht geschlossen, auch im CSS sind zwei Fehler: "font-family" und "line-height" sind falsch geschrieben (einmal Bindestrich, einmal E zu wenig). Vom logischen Aufbau ist das HTML auch falsch: #wrap (wie schon geschrieben) ist überflüssig, #hauptschrift wäre gern ein <h1>, <h3> ein <h2> sowie <h5> ein <h3> - sonst fehlen ja Ebenen in der Hierarchie. das <h1> ganz unten sollte eigentlich eher ein <p> sein, eine Überschrift scheint mir das nicht zu sein. In <main> gehört imho der ganze Seiteninhalt, also auch das <article>.
Wo hast du main und article als Text eingefügt? Da stehen nur zwei Kommentare mit <main></main> bzw. <article> </article> als Inhalt - und die werden natürlich nicht dargestellt. Aber natürlich lässt sich auch HTML-Quelltext auf einer Seite darstellen.
btw: du weißt das der Support von Windows 7 Anfang des Jahres eingestellt wurde?