Ciao, rispondo ai 3 punti anche se l'oggetto in discussione riguarda giusto il punto 1.

1.
Puoi risolvere in diversi e svariati modi ma ci vorrebbe un wikipedia per spiegarti nel dettaglio quali sono le variabili in gioco e come poter gestire al meglio la cosa. Mi limito a darti qualche indicazione e proporti una possibile soluzione con ciò che hai già sviluppato.

Il tutto gira attorno al "box model CSS".
In sostanza un elemento block (come un semplice div) di norma si estende per il 100% del suo contenitore. Applicando però il float, questa caratteristica viene "persa", per cui il div collassa riducendosi in base al suo contenuto.

Ora, l'approccio dei due div usati solo per inserire quella banda puramente estetica, a me non piace molto; piuttosto andrei a risolvere in diversi altri modi, ad esempio con dei background multipli o con degli pseudo-elementi. Ad ogni modo, se mantieni quei due div, puoi comunque risolvere calcolandoti opportunamente gli ingombri.

Nota che quel tuo 91% non va comunque bene se ad esempio si andasse a ridurre la larghezza della finestra del browser. Il problema resterebbe comunque.

Calcolando che la width del primo div è 108px e che i margini orizzontali sono 0px e 25px, la loro somma fa esattamente 133px. Questo è il valore che dovresti togliere al 100% del secondo div.

Per la proprietà width del secondo div puoi quindi usare la funzione calc() in questo modo:
codice:
width: calc(100% - 133px);
Questo dovrebbe essere sufficiente per risolvere ma, ripeto, potrebbero esserci mille altri modi più o meno adeguati.

Aggiungo comunque: per ulteriori informazioni riguardo il box model e argomenti annessi, può esserti utile consultare i link utili CSS se già non lo hai fatto. Tra i primi capitoli puoi trovare molti riferimenti a guide di base che spiegano questi e altri concetti fondamentali.

2.
Ho provato con attuali versioni di FF e CH, il problema non si presenta, mentre lo noto con Edge e IE11.

Personalmente non so dirti quali siano di preciso le cause ma so che il problema è relativo ad alcuni browser (IE tra tutti) e molti hanno suggerito/provato svariati workaround che, da quel che ho letto, non funzionano comunque o funzionano in parte.

Posso giusto consigliarti di fare qualche gugleata del tipo: "favicon not showing locally"

Io, dalle poche ricerche che ho fatto, non ho trovato nulla di ufficiale ma giusto svariate discussioni; qui alcune:
Favicon NOT working on Edge
local (file://) website favicon works in Firefox, not in Chrome or Safari- why?

3.
Per verificare se il markup e/o il codice CSS è valido, ti basta usare un validatore; ce ne sono diversi online (vedi al capitolo 5 dei link utili CSS, sotto la voce "Validatori"). Una prima analisi puoi quindi farla tu stesso, ad esempio con questo validatore: https://validator.w3.org/nu/?doc=htt...FEsercizio.htm

In effetti ci sono alcuni errore, direi comunque "minimi" perché non influiscono sull'aspetto visivo del layout, però è sempre bene abituarsi a correggere qualunque errore.

Direi inoltre che molti meta-tag che hai inserito sono superflui; mi limito però solo a questa osservazione perché bisognerebbe comunque analizzare l'elaborato all'interno del suo contesto di utilizzo per poter comprendere e valutare ciò che può essere ragionevole adoperare...

[MOD]
...ma soprattutto si andrebbe off-topic; infatti abbiamo già messo troppa carne al fuoco. La regola d'oro è "una discussione <=> un argomento"; meglio non uscire fuori dall'oggetto in questione, più di quanto già ho fatto io rispondendo a questi altri due punti.

Tra l'altro, questi ultimi due punti non riguardano nello specifico il CSS; per cui (senza offesa) se ritieni opportuno chiedere ulteriore aiuto riguardo questi o altri punti non inerenti l'oggetto della discussione, ti invito ad aprire delle eventuali nuove e specifiche discussioni nel/nei forum più appropriato/i. Grazie.

Buona domenica e buon proseguimento.