Ajuda com alinhamento das boxes

19/02/2022

0

Ola, preciso de ajuda com um problema que não achei respostas no google.
As minhas boxes estão ficando desalinhadas e não sei o que esta acontecendo.
* {
    margin: 0;
    padding: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');

.top {
    display: block;
    width: 100%;
    box-shadow: -2px 33px 54px -33px rgba(0,0,0,0.31) inset;
    text-align: center;
}

.top img {
    width: 95px;
    margin-top: 10px;
}

.mid {
    width: 50%;
    display: inline-block;
    text-align: left;
}

.mid h1 {
    font-size: 85px;
    margin-top: 85px;
    margin-left: 100px;
    font-family: 'Montserrat', sans-serif;
}

.mid h2 {
    font-size: 85px;
    margin-left: 100px;
    font-family: 'Montserrat', sans-serif;
    background: #1626FF;
    background: -webkit-linear-gradient(to right, #1626FF 0%, #00FF00 23%, #CF1512 32%);
    background: -moz-linear-gradient(to right, #1626FF 0%, #00FF00 23%, #CF1512 32%);
    background: linear-gradient(to right, #1626FF 0%, #00FF00 23%, #CF1512 32%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;    
}

.mid-2 {
    display: inline-block;
    width: 49%;
    text-align: center;
}

.mid-2 img {
    width: 350px;
}

.midlow{
    display: inline-block;
    width: 300px;
    padding: 25px;
    margin-top: 200px;
    margin-left: 175px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 5px 5px 18px -9px #000000;
    font-family: 'Montserrat', sans-serif;
}

.midlow h1{
    font-style: italic;
}

.midlow li{
    margin-top: 15px;
    list-style: none;
}

.midlow-2{
    display: inline-block;
    width: 300px;
    padding: 25px;
    margin-left: 175px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 5px 5px 18px -9px #000000;
    font-family: 'Montserrat', sans-serif;
}

.midlow-2 h1{
    font-style: italic;
}

.midlow-2 li{
    margin-top: 15px;
    list-style: none;
}
Marcos Junior

Marcos Junior

Responder

Posts

16/03/2022

Marcos Lanzoni

Boa tarde , acredito que vc tera que usar o FlexBox , existe um bom material sobre isso aqui na DevMedia ,

segue link para estudo

https://www.devmedia.com.br/css3-flexbox-funcionamento-e-propriedades/29532
Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar