Problema bootstrap

[WebN]

Recentemente ho deciso di utilizzare il framework twitter bootstrap per la realizzazione di un sito.
Uno degli elementi che mi hanno colpito di tale framework sono le varie caratteristiche della griglia, con la quale si può personalizzare praticamente tutto.

Mi sono dunque cimentato in 3 div di prova per testarne il funzionamento.

<div class="container" id="red">
         <div class="span4" id="yellow">...</div>
         <div class="span8" id="green">...</div>
         </div>

Per poi associare ad esso, oltre il framework logicamente, il seguente codice CSS :

#red {
	background-color : red;
	min-height : 200px;
}

#green {
	background-color : green;
	min-height : 200px;
}

#yellow {
	background-color : yellow;

}

Nulla di complesso dunque, e per chi conosce bootrastrap saprà che i due div possono stare all' interno della stessa riga dato che si tratta di 12 colonne complessive di width.
Ciò si può vedere anche nel sito ufficiale tra gli esempi : http://twitter.github.com/bootstrap/scaffolding.html

Il risultato però è il seguente :

Un padding left che non mi permette di allinerali.

Qualcuno sa dirmi perhè ? ( nel body ho specificato padding 0 )

Ringrazio tutti in anticipo

 

[marco_rx]

Aggiungi un margin-left: 0 a #yellow

 

[WebN]

Grazie Marco, logicamente funziona ma volevo capire perché imposta questo margine che non dovrebbe impostare.
Guardarndo il css del loro sito infatti non mi sembra che essi debbano utilizzare tale espediente per ottenere l'effetto desiderato.

Grazie ancora

 

[marco_rx]

Il margine c'è sempre anche in quel sito, la differenza è che i 2 div hanno un contenitore con margine negativo:

<div class="row show-grid">
    <div class="span4">4</div>
    <div class="span8">8</div>
</div>

.row {
    margin-left: -30px;
}

Volendo per risolvere il problema puoi anche tu racchiuderli in un div con classe row:

<div class="container" id="red">
    <div class="row">
         <div class="span4" id="yellow">...</div>
         <div class="span8" id="green">...</div>
    </div>
</div>

 

[WebN]

Grazie davvero, mi hai risolto un vero impiccio.

 

[WebN]

Scusate il doppio post, ma volevo finire di chiarire i miei dubbi con sto dannato framework che tanti problemi mi sta causando in questa fase iniziale.

Una volta che sono riuscito a inserire i div all' interno del container, ho pensato che fosse meglio aggiungere un po di padding a quest' ultimo per migliorarne l' effetto.
Nel caso infatti che il body sia bianco, non sorge alcun problema infatti, ma quando il colore cambia, si nota che gli elementi sono attaccati al margine del container.

A questo punto ho pensato di aumentare le dimensioni del container nel css "bootstrap-responsive.css" da 1170px a 1210px; e nel classico "style.css" ho invece aggiunto un padding laterale.

.container {
padding : 0 20px;
}

A questo punto a mio parere l' effetto dovrebbe essere quello sperato, ma non è così, ed il risultato è il seguente :

Ovvero, un margine destro nettamente superiore.
A questo punto ho pensato che magari potesse esserci anche un margine destro e ho provato ad azzerarlo, ma nulla.

Cosa dovrei fare ?
E nel caso in cui riuscissi a farlo, penso proprio che darebbe qualche problema in fase di adattamento ai vari dispositivi.
Dovrò lavorare con le query, per impostare in tutte dimensioni differenti ?

Grazie in anticipo a tutti e scusate per l' eventuale disturbo