Расположите четыре элемента на странице

Question

Мне нужно разместить четыре элемента примерно так:

CSS:

code {  
  display: block;  
  text-align: center;
}

section {
  display: inline-block;
  text-align-last:center;
  width: 35%;
  margin: 1%;   
  padding: 1; 
}  

h1 {
    color: #626262;
    display: block;  
    text-align: center;
}

h2 {
    color: #626262;
    display: block;   
} 
#outer {
  margin-left: 20%;
} %, -50%); 

HTML :

<div id = "outer">   
    <section>  
        <h2>ELEMENT 1</h2> 
    </section>

    <section>  
        <h2>ELEMENT 2</h2>    
    </section>

    <section> 
        <h2>ELEMENT 3</h2>    
    </section>

    <section> 
        <h2>ELEMENT 4</h2> 
    </section>
</div>

Но на некоторых платформах такая страница отображается некорректно, подскажите, как более правильно реализовать эту задачу.

Answer 1

Я настоятельно рекомендую вам использовать css flexbox и css grid или что угодно. И ваш код должен выглядеть так. Спасибо

.main-div{
  display:flex;
  justify-content:center;
  
}
section {
  text-align-last:center;
  width: 35%;
  border:2px #000000 solid; 
  padding: 30px;
}  

h2 {
    color: #626262;
    display: block;   
} 
#outer {
  width:70%;
  margin:auto;
  border:2px #000000 solid; 
  padding:80px;
} 

<div id = "outer"> 
  <div class="main-div">
    <section>  
        <h2>ELEMENT 1</h2> 
    </section>

    <section>  
        <h2>ELEMENT 2</h2>    
    </section>
  </div>
  <div class="main-div">
    <section>  
        <h2>ELEMENT 3</h2> 
    </section>

    <section>  
        <h2>ELEMENT 4</h2>    
    </section>
  </div>
</div>

Answer 2

Вы должны использовать border: 2px solid #626262; для раздела и #outer div как

#outer {
  margin: auto;
  padding: 10px;
  text-align: center;
  border: 2px solid #626262;
}

И установить первое и третье поля для более близкого

section:first-child, section:nth-child(3){
  margin: -6px;
}

code {  
  display: block;  
  text-align: center;
}

section {
  display: inline-block;
  text-align-last:center;
  border: 2px solid #626262;
  width: 35%;
  margin: 0px;   
  padding: 15px 0 15px 15px; 
}  

section:first-child, section:nth-child(3){
  margin: -6px;
}

h1 {
    color: #626262;
    display: block;  
    text-align: center;
}

h2 {
    color: #626262;
    display: block;   
} 
#outer {
  margin: auto;
  padding: 10px;
  text-align: center;
  border: 2px solid #626262;
}

<div id = "outer">   
    <section>  
        <h2>ELEMENT 1</h2> 
    </section>

    <section>  
        <h2>ELEMENT 2</h2>    
    </section>

    <section> 
        <h2>ELEMENT 3</h2>    
    </section>

    <section> 
        <h2>ELEMENT 4</h2> 
    </section>
</div>