hocam asıl bahsettiğim o değildi ama onu denemiştim. alttaki şekilde yaptım ama olmadı.
.search {
margin-top: 15px;
margin-bottom: 15px;
margin-left: 250px;
border-radius: 15px;
background: url(img/search.svg) no-repeat #fff;
}

benim asıl yapmak istediğim ise arama kutusunu sağ köşeye alıp(bunun nasıl yapılacağını biliyorum ) inputa sadece tıklandığında genişlemesini istiyorum. arama kutusunu en sağa aldığımda login register başlıklarını silmiyor bunlarında silinmesini istiyorum.
#search:hover, #search:focus {
background: #d29190;
margin-left: 20px;
width: 80%;
outline: none;
position: fixed;
color: #fff;
}

burada #search:hover, #search:focus u input:focus olarak değiştirdiğimde arama kutusunda bir değişiklik olmuyor. ben de bu işlerde daha yeni olduğumdan sorunun nerede olduğunu çözemedim.