Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Sempre que Adiciono uma Imagem cria barra horizontal e vertical

Eu fui colocar a imagem do Vitinho e deu nessas barras, antes deu esse problema quando coloquei a imagem que ta do lado do texto mas so zerei o padding do header e acabou as barras, mas quando coloquei a foto do vitinho ( embaixo do texto) as barras voltaramInsira aqui a descrição dessa imagem para ajudar na acessibilidade

MEU CSS
:root {
    --cor-back : #993b26;
    --cor-txt-hover : #ba200b;
    --cor-txt-normal : white;

}

html, body { 
    background: black;        
}


header {
    background: #993b26;
    width: 1440px;
    display: flex;
    align-items: center;


}

.container {
    display: flex;
    align-items: center;
}

.logo-fla {
    margin-left: 10px;
}

.logo-fla:hover {
    opacity: 70%;
    box-shadow: 10px 10px 10px black;
    float: left;

}

.menu-esquerda li {
    color: darkred;
    position: relative;
    display: inline-block;
    margin: 0 20px;
}



.menu-esquerda li a {
    font-size: 22px;
    text-decoration: none;
    color: ghostwhite;

}

.menu-esquerda ul li:hover .sub-menu-1 {
    width: 350px;
    display: block;
    position: absolute;
    background: #993b26;

}

.menu-esquerda li a:hover {
    color: #54180a;    
}

.sub-menu-1{
    display: none;
    padding: 0px 0px 10px 0px;
}

.sub-menu-1 p {
    color: white;
    padding: 15px 0px 10px 20px;

}

.sub-menu-1 ul li a {
    font-size: 23px;
}

.sub-txt p {
    padding: 0px 0px 10px 20px;
    font-family: 'Figtree', sans-serif;

}



.Entre {
    display: flex;
    padding-left: 550px;

}

.Entre li {
    display: inline-block;
    margin: 10px;
}

.Entre li a {
    font-size: 22px;
    text-decoration: none;
    color: white;

}

.Entre li a:hover {
    color: #54180a;
}

.registre {
    background: black;
    padding: 10px;
    border-radius: 10px;
}

.registre li {
    display: inline-block;

}

.registre li a {
    text-decoration: none;
    font-size: 22px;
    color: white;

}

.registre li a:hover {
    color: #ba200b;
}

.Dwn-Pt-FlaCoin {
    margin: 0 auto;

}

.Dwn-Pt-FlaCoin li {
    display: inline-block;
    padding: 7px;


}

.Dwn-Pt-FlaCoin li a {
    font-size: 22px;
    text-decoration: none;
    color: white;

}

.Dwn-Pt-FlaCoin li a:hover {
    color: #54180a;

}


/*MAIN*/

.principal {
    text-align: ;
    margin-top: 6.5em;
    margin-left: 5em;
    display: inline-block;
}

.arrasca {
    float: right;
    margin: 120px 13px 0 0;
    height: 410px;
}


.titulo-principal {
    text-transform: uppercase;
    font-size: 45px;
    font-family: 'Figtree', sans-serif;
    font-weight: bold;
    cursor: pointer;
    color: #ba200b;    
}

.seg-linha {
    text-transform: uppercase;
    font-size: 45px;
    padding-left: 19px;
    font-family: 'Figtree', sans-serif;
    cursor: pointer;
    color: #ba200b;    
}

.tec-linha {

    margin-top: 2.5em;
    padding-left: -20px;
    cursor: pointer;
    color: #ba200b;
    font-size: 25px;

}

.qrt-linha {
    color: #ba200b;
    margin-top: 2.5em;
    font-size: 25px;

}

.form-email-login {
    margin-top: 2.7em;


}

form label {
    color: #ba200b;
    display: block;
    font-size: 20px;


}

form input, .emailpadrao {
    padding: 10px;
    color: black;
    font-size: 20px;
    border-radius: 10px;
    border: white;
    width: 60%;
    height: 35px;
    cursor: pointer;

}

.email-form:hover {
    border-color: #ba200b;

}


.email::placeholder {
    padding: 13px;
    color: black;

}



.bot-sub {
    width: 165px;
    height: 50px;
    float: right;
    margin-top: -52px;
    margin-right: 7px;
    border-radius: 10px;
    font-size: 20px;
    padding: 13px;
    color: black;
}



.bot-sub:hover {
    border-color: #ba200b;
}

.vitinho-foto {

}
2 respostas
solução!

Eu apenas coloquei overflow-x: hidden; para apagar a barra horizontal e depois arrumei as margins e os padding dos elementos e solucionou o ''erro''.

Vitinho sempre atrapalhando