Non so cosa centra

[JtothaX]

Il titolo ve lo spiego subito.
Sto realizzando un mio (primo) sito responsive.
Il succo da gestire è nel menu di navigazione. Imposto dunque i CSS per tre situazioni, a cascata:

/* Codice generale per i 3 casi [...] */
@media screen and (max-width: 768px) {/* Tablet */}
@media screen and (max-width: 480px) {/* Smartphone */}

Nelle regole generale ho imbastito quanto segue:

#intestazione {
	max-width: 60em;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}


#logo {
	width: 300px;
	margin: 0 1% 0 0;
	float: left;
}

e un tag nav con dentro un ul, appunto il menu, a destra.

Voglio che arrivati alla formattazione per tablet e mobile, il logo si centri rispetto all'intestazione e poi appunto appaia il menu nuovo per la navigazione da dispositivi mobili (che realizzerò in seguito, prima voglio raccapezzarmici un attimo).

Annullo il float. Però il margin 0 auto non funziona.
Funziona solo così, ma non so mica perché:

@media screen and (max-width: 768px) {
#logo {
	clear: both;
	position: relative;
	left: 50%;
	margin-left: -150px;
}


#menu {
	display: none;
}
}

Pensavo di dover mettere il position relative al #intestazione e il position absolute al figlio #logo ma non funzionava per niente. Spariva tutto. Così invece fa quello che gli si dice. Il problema appunto è che non capisco il motivo pur avendo masticato CSS da tanto e smanettato parecchio in materia.

Non è che magari ho fatto un erroraccio di fondo e funziona per questioni di #####.pardon, bottom?
Grazie come sempre a tutti e buon Web

 

[glm1986ITALY]

Gentilmente moderiamo il linguaggio ed occhio agli errori di battitura.

 

[criric]

Ciao, prova così

@media screen and (max-width: 768px) {
        #logo {
            float : none;
            margin:auto;
        }

    }

 

[JtothaX]

Wa, grazie criric! Sembra funzionare anche così.
Risparmiate 3-4 righe di codice che fa sempre bene...