I can't move the last div inside the titolo
class to the right.
Inside the div with the titolo
class there are 5 more divs.
The last div of these 5 should move to the right.
I would like to avoid using the margin for moving
Can anyone help me please?
Thanks so much!!
body {
font-family: 'PT Sans Narrow', sans-serif;
background-color: black;
}
.bannerSup {
background-color: black;
padding: 5px
}
.titolo {
display: flex;
font-size: 1.3em;
padding: 15px;
}
.titolo a {
color: aliceblue;
text-decoration: none;
}
div.titolo>div {
margin-right: 70px;
margin-bottom: -10px;
}
div.titolo>div>a.contatti {
color: red;
}
div.titolo>div:nth-child(5) {
align-self: flex-end;
}
.bannerInf {
border: 10px solid azure;
padding: 20px;
display: flex;
}
#banner1 {
width: 100%;
}
<div class="bannerSup">
<div class="titolo">
<div> <a href="https://www.google.com" target="_blank">PRODOTTI</a></div>
<div> <a href="https://www.google.com" target="_blank">ABOUT US</a></div>
<div> <a href="https://www.google.com" target="_blank">STORY</a></div>
<div> <a href="https://www.google.com" target="_blank">CONTACTS</a></div>
<div> <a class="contatti">CONTACTS</a></div>
</div>
<div class="bannerInf">
<img id="banner1" src="https://via.placeholder.com/800x100" alt="Immagine Banner">
</div>
</div>