CSS Kodu Düzenlemesinde Yardım Eder Misiniz?

Selamlar hocalarım, aşağıdaki sitemin header kısmında Menüyü en sağa arama kısmını da ortaya almak için css kodları ile uğraşayacak masaüstünde yer değiştirme işlemini başardım fakat mobilde menü sağ tarafa taştı. Sanırım kullandığım css kodları yanlış yardımcı olabilir misiniz.

.nav-float-right #site-navigation {
    margin-left: 1080px;
    margin-right: -1246px;
}
 
@media only screen and (max-width: 768px) {
    .nav-float-right #site-navigation {
        margin-right: 0;
    }
}

input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
    border: 1px solid;
    border-radius: 0;
    padding: 15px 85px;
    max-width: 100%;

}

Bu aşağıdaki gibi bir görüntü elde etmek istiyorum. Şuan kullandığım ekran 27 inc ve bu ekrana göre görüntüsü tam olarak istediğim gibi fakat responsive olmadığı için mobilde ve farklı ekranlarda bozuk görünüyor. Bu kodlar yerine farklı bir çözüm üretebilecek bir arkadaş var mı?

Site: neiyigelir.com

max-width: 50%;

En alttaki kodu değiştiriniz.

Öncelikle muazzam bir kod karışıklığı var. CSS kodunu direkt olarak index içine koymuşsun bu çok kötü bir şey. Öte yandan Grid kullanarak itemleri düzenlemelisin. Yani çözünürlüğe göre Margin-left-right değerleri vermek yerine grid kullanmalısın. "@media only screen and (max-width: 768px " yapmışsın fakat sadece margin değerini düzenlemişsin. Çok fazla hata mevcut.

Ücretli yardım edebilecek var mı?

@metin_nn; yardımcı olur musun kardeşim?

Whatsapp'tan ulaşıldı