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

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 >
    <div >
    <p >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 >
      <p >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;
  }

}

CodePudding user response：

You can never fit something big inside something that can't contain it. Look at tel.number is way too long and the first column have priority. Either give more space or use a 20px or less font-size