Anlatmak istediğim Şey çok karmaşık gelmiş olabilir farkındayım ancak istediğim şey mantıkta çok basit csse dökemedim
css'de bunu ayarlıyorum ancak farklı pixellerde bozulma ve kaymalar oluyor

@media (max-width: 767px) {
    .ustkisim {
        background: #7EA204;
        height: 250px;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .banner-image {
        position: absolute;
        right: 8rem;
        top: 6rem;
    }}

1500px


bu sorunu nasıl çözebilirim math gibi bi fonksiyon yok mu

<div class="row ustkisim">
    <div class="col-12 pad0 headertop"></div>
    <div class="container pad0">
      <div class="row">
        <div class="col-lg-9 col-sm-8 col-xs-7 ptb1">
            <img class="logo-image" src="logo.wepb"></img>
        </div>
            <div class="col-3 col-xs-4 banner-image">
                <a href="#"><img src="banner.webp" alt="Atam"></img></a>
            </div>
<div class="menu"></div>
      </div>
    </div>
   </div>