How to create a large banner in the entire width of the site?

Question

HTML

Hello. I just started learning HTML and ran into a problem, I wrote the code for the future banner in the notepad and when viewing the finished file through the browser, everything is ok.

But when I try to add it to the site, I get the following:

Please help me figure out what the problem is. Here is the code itself:

<div class="baner" style="width:100%;">
<div class="banerleft"  style="width:50%;float: right;">
<a href="sample.html"><img src="/img/baner1.jpg" width="100%" alt=""></a>

  </div>

<div class="baneright" style="width:50%;background: #000;float: left;">
<a href="sample.html"><img src="/img/baner.jpg" width="100%" alt=""></a>
<img style="opacity: 0.7;">
<a href="#" style="position: absolute;
    top: 50%;
    z-index: 10;
    left: 17%;
    text-align: center;
    color: #fff;
    font-size: 46px;
    font-family: arial;
      text-decoration: none;
    border: 3px solid #fff;
  padding: 14px;">SAUCONY<br>@JAZZ 4000</a>
  </div>