Адаптивный блок

[Seendorei]

Здравствуйте уважаемые форумчане, подскажите пожалуйста, не получается сделать блок адаптивным(я в этом не очень разбираюсь =)) ). Уже голова кипит, все попереисправлял, переделал, удалял и добавлял, что просто запутался, очень прошу вас распутать и подсказать как правильно, чтобы я точно знал :). Спасибо заранее.

В чем собственно проблема: А в том, что этот блок не уменьшается пропорционально ширине экрана.

На 1 скриншоте он вообще выпадает из общего контента. А на 2 скриншоте появляется горизонтальная прокрутка.

Пересмотрел много роликов и статей, но чет так сильно запутался во всем этом :((.

CSS code блока и т.д: 
 

@media (max-width: 320px) {
  .wat{
    left: 260px;
  }
}

.wat{
  margin:0;
  margin-left: 5.5em;
  left: auto;
  top: 260px;
  border: 3px red solid;
  border-radius: 3px;
  width: 150px; height: 50px;
  position: relative;
  padding-left: 4px;
  padding-top: 0px;
  display: block;
}
#btn3{
  position: absolute;
  margin-left: 8px;
  top: 13px;
  border: 3px red solid;
  border-radius: 3px;
  width: 150px; height: 50px;
}
span{
  font-size: 16pt;
  margin-left: 50px;
  position: absolute;
  top: 14px;
  left: -1px;
  font-size: 16pt;
  color: white;
}
.opa{
  display: block;
  border-radius: 3px;
  border: 3px red solid;
  width: 150px; height: 50px;
  position: relative;
  z-index: 100000;
  margin-top: -12.8em;
  margin-left: 18.5em;
}
@media (max-width: 320px){
  .opa{
    width: 25%;
    height: auto;
  }
}

Вот HTML Код:

<ul id="slides">
      <li class="slide showing">Slide 1
          <!--<div class='wat'><img id='btn3' src='app2.png'></img></div>-->
      </li>
 <li class="slide">Slide 2</li>
 <li class="slide">Slide 3</li>
</ul>

<div class='opa'>
  <img src='app.svg'></img>
  <span>App Store</span>
</div>

 

 

        

Edited December 19, 2018 by Seendorei

[spdif]

что конкретно не понятно? локализуйте вашу проблему! 

а пока вот http://jsfiddle.net/zy4uk26j/5/ на вашем примере сделал,  

два примера с разным поведением одного и того же блока 

...

[garik-garik]

я практически все делаю flexboxАМИ, без головной боли потом, все красивенькое, резиновенькое