higordiasz

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 ?

Opa ... eu consegui arrumar trocando as DIV por table ... segue o meu codigo .. caso possa ajudar alguem. HTML <table class="tabela"> <tr> <th> <ul class="ul-softwares"> <li class="li-img"><img src="./img/programacao.png"></li> <li> <h1 class="title-ul">Softwares</h1> </li> <li class="li-p"> <p class="text-ul">Possuimos diversos Softwares para a sua empresa.</p> </li class="li-p"> <li class="li-bt"><button class="bt-geral bt-prog">Saiba Mais</button></li class="li-bt"> </ul> </th> <th> <ul class="ul-bancodedados"> <li class="li-img"><img src="./img/bancodedados.png"></li> <li> <h1 class="title-ul">Banco de Dados</h1> </li> <li class="li-p"> <p class="text-ul">Organimazanos todos seus dados e configuramos oque precisa.</p> </li class="li-p"> <li class="li-bt"><button class="bt-geral bt-bd">Saiba Mais</button></li class="li-bt"> </ul> </th> <th> <ul class="ul-mobile"> <li class="li-img"><img src="./img/mobile.png"></li> <li> <h1 class="title-ul">Desenvol. Mobile</h1> </li> <li class="li-p"> <p class="text-ul">Fazemos o aplicativo ideal para a sua Empresa.</p> </li class="li-p"> <li class="li-bt"><button class="bt-geral bt-mobile">Saiba Mais</button></li class="li-bt"> </ul> </th> <th> <ul class="ul-redeestruturada"> <li class="li-img"><img src="./img/rede.png"></li> <li> <h1 class="title-ul">Estrutura de Rede</h1> </li> <li class="li-p"> <p class="text-ul">Fazemos toda o mapiamento da rede e implantação.</p> </li> <li class="li-bt"><button class="bt-geral bt-rede">Saiba Mais</button></li> </ul> </th> </tr> </table> CSS : .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 table { text-align: center; align-content: center; } .li-img { padding-top: 6px; } .tabela tr th { padding-left: 10px; width: 180px; text-align: center; } .tabela tbody { align-self: center; text-align: center; } .tabela { width: 100%; margin: 0 auto; } .title-ul { color: #00bac6; font-size: 25px; } .text-ul { color: #ffffff; } .bt-geral { vertical-align: bottom; margin-top: 15%; border: 1px solid #00bac6; border-radius: 15px; color: #ffffff; background-color: #373737; padding: 4px; } .bt-geral:hover { background-color: #00bac6; color: black; border: 1px solid #000000; cursor: pointer; } .li-bt { height: 20%; } .li-p { height: 20%; } Resultado: Acrescentei no button que quando acontece o hover ele muda a cor do background da letra e da borda. E deixei a classe separada para cada button para poder pegar no JS caso necessario. caso alguem queira melhorar o codigo, ficaria agradecido. E nois.