html - css で max-width を使用して柔軟な画像を作成するにはどうすればよいですか

Question

モバイル用の Web サイトを作成しようとしていますが、柔軟な画像に問題があります。max-width:100% と height:auto を使用していますが、ページをリロードすると画像の一部しか表示されず、黒い線のように見えます...誰か助けてください。これに多くの時間を費やしても結果が出ないので、どうしたらよいでしょうか.....

これは私が必要だと思うcssの部分です：

.mobilenav{display: block;}

/*Class for the logo of the website*/

.logo1{background:  url(images/logobank8.png) no-repeat;
      margin-top: 2%;
      margin-left: 20% ;
      max-width: 100%;
      height: auto;
         }
/*Class for a transparent header which is put at the begining of the page*/ 
.header1{ background: rgba(74, 84, 91, 0.7);
          width: 110%;
          height: 50px; }

そして、これはhtml部分です：

<div class="mobilenav">
                    <div class="header1">
                            <div class="logo1"></div>
                    </div>