Posiadam Diva, w którym jest napis, input i zdjęcie. Chcę aby input był nieco oddalony od napisu a zdjęcie było przyklejone do prawej strony.
1. Napis i input powinny być na środku wysokości div - użyłem w tym celu display:flex oraz algin-items: center
2. Dla zdjęcia napisałem nową klasę, ale niestety nie działa - nie umieszcza mi zdjęcia po prawej stronie diva - nawet pomimo dodania !important.
Czy wie ktoś co robię źle?
HTML
<div class="bluebar">
<div class="inside">
SOCIAL   
<input type="search" class="search" placeholder="Search friends">
<img src="img/ja.jpg" class="img">
<div>
</div>
CSS
.bluebar
{
height:50px;
background-color: #3c5a99;
display:flex;
align-items:center;
}
.inside
{
width:800px;
color:white;
margin:auto;
font-size: 1.5rem;
font-style:italic;
font-weight:800;
display:flex;
align-items:center;
}
.search
{
outline:none;
height:25px;
width:300px;
border-radius:10px;
border:none;
background-image: url("../img/search.png");
background-repeat: no-repeat;
background-size: contain;
background-position:right;
}
.search:focus
{
background-image:none;
}
.img
{
height:50px;
display:unset!important;
float:right!important;
}