Problem with column layout, no space for columns in smaller resolution

I have problem with column layout. I have tried to fix this multiple times but i dont know what i am doing wrong. When is width smaller there is no space to the time column and its getting to the next lines. I know i have margin: 0 30%; but i dont want big gaps so this is the reason. If there is margin:0 10% there is space and its working normal, but i dont like that big gaps.

There is that what i mean: https://i.stack.imgur.com/uigBy.png

<div class="kontakt-container">
    <div class="dva">
    <p class="kontakt-text">Otevírácí hodiny</p>
<table>
  <tr>
    <th>Polní 600</th>
  </tr>
    <tr>
    <th> Orlová</th>
  </tr>
    <tr>
    <th>Česká republika</th>
  </tr>
    <tr>
    <th>Centrum zdraví a krásy</th>
  </tr>
    <tr>
    <th>budova KMstyl, 1.patro</th>
  </tr>
      <tr>
    <th>Tel. číslo: 735 250 837</th>
  </tr>
</table>
    </div>
    <div class="tri">
      <p class="kontakt-text">Otevírácí hodiny</p>
<table>
  <tr>
    <th>Pondělí:</th>
    <th>11:00 - 15:30</th>
  </tr>
    <tr>
    <th>Úterý:</th>
    <th>12:00 - 18:00</th>
  </tr>
    <tr>
    <th>Středa:</th>
    <th> Zavřeno</th>
  </tr>
    <tr>  <tr>
    <th>Čtvrtek:</th>
    <th>12:00 - 18:00</th>
  </tr>
    <tr>  <tr>
    <th>Pátek:</th>
    <th>11:00 - 14:300</th>
  </tr>
    <tr>  <tr>
    <th>Sobota:</th>
    <th>Zavřeno</th>
  </tr>
    <tr>  <tr>
    <th>Neděle:</th>
    <th>Zavřeno</th>
  </tr>
    <tr>
</table>
    </div>
  
</div>

* {
   margin: 0;
   padding: 0;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

.container:after {
    clear: both;
}



.kontakt-container {
  font-size: 25px;
}

.kontakt-container {
  margin: 0 30%;
  text-align: left;
display: flex;
  justify-content: space-evenly;
}

.dva {
  text-align: justify;
}

.tri {
    text-align: justify;
}

table {
  margin-top: 20px;
}

@media all and (max-width: 800px) {
    .kontakt-container {
flex-direction: column; align-items: center; max-width: max-content; margin: auto; 
      display: block;
      background-color: red;
      
    }
  
  .tri {
    margin-top: 20px;
  }

}