Создание сегмента кода CSS, совместимого с несколькими браузерами?

Question

У меня есть опыт работы с CSS/HTML в течение недели, и я был в тупике по этой проблеме уже около получаса. Я действительно не знаю, как адаптировать этот сегмент кода, чтобы он мог успешно работать в разных браузерах. Он отлично работает на Chrome, выравнивая изображения в ряд из четырех, равномерно распределенных, но не работает для Safari. Я не тестировал, работает ли он на Firefox. Если кто-то может показать мне, как адаптировать этот код, я был бы очень признателен.

#containermain { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
#containermain div { 
 
    width: 250px; 
 
    height: auto; 
 
    background: rgb(255, 255, 255, 0); 
 
} 
 
#containermaintext div { 
 
    width: 250px; 
 
    height: auto; 
 
    background: rgb(255, 255, 255, 0); 
 
} 
 
#containermain div:first-child { 
 
    border-left: 0; 
 
} 
 
#containermain div:last-child { 
 
    border-right: 0; 
 
}

<div id="containermain" class="slideExpandUp"> 
 
    <div> 
 
    <a href="physics.html"> 
 
     <img src="images/atom.png" style="width: 100%;"> 
 
    </a> 
 
    </div> 
 

 
    <div> 
 
    <a href="math.html"> 
 
     <img src="images/mathematics.png" style="width: 100%;"> 
 
    </a> 
 
    </div> 
 

 
    <div> 
 
    <a href="humanities.html"> 
 
     <img src="images/books.png" style="width: 100%;"> 
 
    </a> 
 
    </div> 
 

 
    <div> 
 
    <a href="stem.html"> 
 
     <img src="images/stem.png" style="width: 100%;"> 
 
    </a> 
 
    </div> 
 
</div>

Answer 1

Я на ПК и не сафари, чтобы проверить это, но я рекомендую добавить в линию блока к внутренним дивы, как это:

 #containermain div { 
      /*width: 250px;*/ 
      width: 20%; 
      display:inline-block; 
      height: auto; 
      background: rgb(255,255,255,0); 
     } 

Я также изменил ширину так, чтобы она быстро масштабировалась и не разбивалась на другую строку.