[HTML + CSS] Problema con 3 div innestati

[pippopamp]

Salve a tutti, sto muovendo i miei primi passi con i css. Volevo realizzare una struttura con 3 div innestati, l'uno dentro l'altro, in cui ogni div si adatta al contenitore esterno. Vi posto il codice:

        <div class="primo">
            <p class="title1">PRIMO LIVELLO</p>
            <div class="inner1">
                <div class="secondo">
                    <p class="title2">SECONDO LIVELLO</p>
                    <div class="inner2">
                        <div class="terzo">
                            <p class="title">TERZO LIVELLO</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

qui invece il css che ho usato:

.primo {
    width: 200px;
    background-color: dodgerblue;
    padding: 10px;
    float:left;
}

.secondo {
    float: left;
    width: 100%;
    background-color: greenyellow;
}

.terzo {
    float: left;
    width: 100%;
    background-color: gold;
}

.inner1 {
    display: none;
    float:left;
    width: 100%;
}

.inner2 {
    padding: 5px;
    clear:both;
    width:100%;
    float:left;
}

Ecco il risultato :





Il tutto funziona fino al livello 2! A livello 3, l'ultimo div non si adatta al suo box contenitore, ma a quello più esterno... mi sapete spiegare come poter risolvere e soprattutto a cosa è dovuto l'errore? Ho visto che utilizzando l'id al posto della class il problema si risolve. Tuttavia, vorrei usare la class in quanto devo realizzare una pagina in cui ci sono molti oggetti con le stesse caratteristiche e, quindi, non mi sembra efficiente usare un id univoco per ognuno di essi.