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 voltaram
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 {
}