div sai do lugar quando escrevo nela

[lucas felipe 0]

galera bom dia,

 

estou fazendo um site e esta acontecendo o seguinte problema, coloco as regras do css e as div e ela sai certinha no site, porem coloco um conteúdo nestas divs elas sai do lugar. alguém poderia ajudar a resolver ? segue o código abaixo:

 

css:

#meio {

width:100%;

text-align: center;

}

.box {

margin: 10px 4px;

margin-bottom: -4px;

display: inline-block;

}

#box-1 {

width: 290px;

height: 300px;

background-color: white;

}

#box-2 {

width: 290px;

height: 300px;

background-color: white;

}

#box-3 {

width: 290px;

height: 300px;

background-color: white;

}

html:

<div id="meio">

<div id="box-1" class="box">aaaaa</div>

<div id="box-2" class="box"></div>

<div id="box-3" class="box"></div>

</div>

desde já agradeço

 

[Matheus P. 1]

Trabalhe com uma div central principal e float, aproveitei e limpei o css e o html, são três divs iguais, não precisa dar um id para cada uma, trabalhe com apenas a classe .box e padronize. Eu refiz o seu código, vai chegar no resultado que você queria, porém mais limpo e de fácil entendimento.

/* TROQUE A MEIO POR BODY */
body {
   margin: 0;
   background: #001F3F;
}
/* ADICIONE ESSA CLASSE */
#wrapper {
   width: 900px;
   margin: 0 auto;
}
/* ALTERE A BOX PARA */
.box {
   width: 280px;
   height: 300px;
   float: left;
   margin: 10px 5px 0 5px;
   padding: 5px;
   background: #FFF;
}

<!-- ADICIONE AS BOX DENTRO DA WRAPPER E REMOVA A MEIO -->
<div id="wrapper">
   <div class="box">a</div>
   <div class="box">b</div>
   <div class="box">c</div>
</div>