vorrei che i 2 div principali avessero la stessa larghezza
[...]
non mi piace perchè la tabella non si è "ridimensionata" ma si è "schiacciata"
[...]
come posso "rimpicciolire" sta tabella senza schiacciarla?
Ciao, senza offesa ma la tua richiesta mi pare della serie "botte piena e moglie ubriaca".

come posso adattare le dimensioni del contenuto della mia pagina alla risoluzione dello schermo da dove la visualizzo? compresi schermi di dispositivi piu piccoli come cellulari etc..
In linea di massima si dovrebbe parlare di design responsivo, ma chiaramente c'è un intero mondo dietro, che di certo non può essere affrontato per intero in una discussione sul forum.

Così, a spanne, ti direi che dovresti fissare dei breakpoint CSS, a quel punto dovrai stabilire (secondo ciò che pensi sia meglio) come vuoi che sia impaginata tale tabella per ognuno dei breakpoint prefissati.

Ci sono svariate tecniche per impaginare al meglio le tabelle in un layout responsive, dall'uso di una semplice barra di scorrimento orizzontale al frammentare la tabella stessa o ridisporre celle e colonne in modo verticale.

Posso consigliarti di fare qualche ricerca del tipo "responsive table", giusto per farti qualche idea sulle possibili soluzioni che puoi adoperare. In qualunque caso dovrai decidere tu, in base ai tuoi criteri di valutazione, cosa sia meglio fare.

Altri possibili piccoli accorgimenti che puoi adoperare per ottimizzare gli spazi:

- Per stabilire tu la larghezza della tabella e dei suoi elementi puoi usare table-layout:fixed

- Per dimensioni ridotte del viewport (attraverso l'impostazione dei breakpoint) puoi ridurre, se non azzerare, il padding laterale delle celle ed eventualmente anche ridurre la dimensione del carattere e rimuovere il grassetto

- Potresti usare un carattere sans-serif così che resti comunque più leggibile (rispetto ad un serif) anche per dimensioni ridotte

- Potresti accorciare/abbreviare il più possibile i testi delle intestazioni di colonna in modo da non dover spezzare le parole con word-break; e magari inserire, nell'attributo title dei <th>, il testo esteso in modo che appaia nel tooltip quando ci si posiziona sopra. Ovviamente questo vale giusto per le intestazioni

- Le colonne con intestazioni simili potresti raggrupparle sotto delle intestazioni principali più generiche, così da avere delle intestazioni e sotto-intestazioni; in questo modo nelle intestazioni principali inserisci il testo con i termini condivisi andando quindi a ridurre (per quantità di termini) il testo delle sotto-intesatazioni

inoltre secondo voi è meglio mettere tutto in un unico div invece che avere 2 div che io ho chiamato tutto e tutto2?
Penso non ci sia un "meglio" o un "peggio", si tratta piuttosto di capire come vuoi che si comporti il layout per i vari breakpoint e a quel punto arriverai a capire da solo se può essere più utile usare 2 div al posto di 1 o viceversa.

Soltanto, nella sviluppo di codice è sempre una good practice usare dei nomi autoesplicativi; nomi come tutto, tutto2, mytable, a lungo andare, quando ti troverai a dover rimettere mano ai vecchi elaborati, ti daranno sicuramente dei grandi mal di pancia.