Replacing float that doesn't work with flex that doesn't work too

I have photo as a background image and it placed right. I also have some list and I want it to be placed left. But it stuck on photo. I used float, but nothing happens. I tried flex but nothing happens too.

its how the page is looking now

.section__img1 {
  position: absolute;
  background: url("../images/section1.png") center no-repeat;
  background-size: cover;
  width: 985px;
  height: 580px;
  top: 50%;
  transform: translateY(-50%);
  right: 50%;
  margin-right: 0px;
}

.section__content {
  float: right;
  width: 40%;
}

.section__content.left {
  float: left;
}

<div id="our-services" class="section bg-blue">
  <div class="container">
    <div class="section__img1"></div>
    <div class="section__content">
      <div class="title-block left"><span class="ico-arrow-down"></span> Входящие звонки</div>
      <ul class="section__list">
        <li>Горячая линия</li>
        <li>Виртуальный офис</li>
        <li>Прием заказов</li>
        <li>Консультации по телефону</li>
        <li>Заполнение анкет</li>
      </ul>
    </div>
    <div class="clear"></div>
  </div>
</div>