Boa Tarde,
Estou tendo problemas em conseguir colocar as div lado a lado alinhadas corretamente .. casso possam me ajudar ficaria grato.
 
Segue meu código CSS responsável pelas div.
 
.col-100 { width: 100%; float: left; position: relative; } .principal-text { background-color: #424242; } .ul-softwares { list-style-type: none; display: inline-block; height: 350; width: 90%; float: left; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-bancodedados { list-style-type: none; display: inline-block; height: 350; width: 90%; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-mobile { list-style-type: none; display: inline-block; height: 350; width: 90%; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-redeestruturada { list-style-type: none; display: inline-block; height: 350; width: 90%; float: right; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .principal-text ul li { margin: auto; text-align: center; } .uls-principal { text-align: center; } .li-img { padding-top: 6px; } .uls-principal div { display: inline-block; width: 180; padding-right: 20px; } Abaixo meu código HTML:
 
<div class="col-100 principal-text"> <main class="uls-principal"> <div class="div-prog"> <ul class="ul-softwares"> <li class="li-img"><img src="./img/programacao.png"></li> <li> <h1>Softwares</h1> </li> <li> <p>Possuimos diversos Softwares para a sua empresa.</p> </li> <li></li> </ul> </div> <div class="div-bd"> <ul class="ul-bancodedados"> <li class="li-img"><img src="./img/bancodedados.png"></li> <li> <h1>Banco de Dados</h1> </li> <li> <p>Organimazanos todos seus dados e configuramos oque precisa.</p> </li> <li></li> </ul> </div> <div class="div-mobile"> <ul class="ul-mobile"> <li class="li-img"><img src="./img/mobile.png"></li> <li> <h1>Desenvol. Mobile</h1> </li> <li> <p>Fazemos o aplicativo ideal para a sua Empresa.</p> </li> <li></li> </ul> </div> <div class="div-rede"> <ul class="ul-redeestruturada"> <li class="li-img"><img src="./img/rede.png"></li> <li> <h1>Estrutura de Rede</h1> </li> <li> <p>Fazemos toda o mapiamento da rede e implantação.</p> </li> <li></li> </ul> </div> </main> </div> Print das DIV: 
 

 
Alguem sabe oq posso alterar para alinhar elas corretamente ? 

Olá mais uma vez,

Estou com um problema relativamente estranho, tenho alguns itens dentro de uma div pai que são gerados dinamicamente com php. Eu listei eles no css para que se exibissem um do lado do outro, como um float, só que usei o display: inline-block para isso. Funciona normal, só que em determinados itens ele apresenta uma estranha margem, o que fazer?

O Código HTML (Lembrando que o conteúdo é gerado por PHP dinamicamente):
<div class="produtos"> <div class="produto"> <img src="#" alt="" /> <div> <h4><a href="#">Nome do produto</a></h4> </div> </div><!-- produto --> </div><!-- produtos --> E o código CSS:
.produtos{width:100%; height:auto; text-align:center;} .produtos .produto{width:240px; height:300px; margin:10px 2px; display:inline-block; border:1px solid #ccc; border-radius:5px;} .produtos .produto img{width:100%; height:150px; margin:0; padding:20px 0;} .produtos .produto div{width:100%; height:100px; background-color:#f8f8f8;} .produtos .produto div h4 a{color:#000;} Aqui vai um print de como ficou o resultado:


Obrigado ;)