html - Horizontally aligning multiple divs within a parent section -

i have few divs inside parent section , i'm trying alignment divs centered within section. right now, divs left aligned. i've tried doing margin: 0 auto that's not working. can explain how accomplish this?

pen

section {    margin-bottom: 10px;    width: 100vw;    height: 100vh;  }    .notice {    width: 50vw;    height: 10vh;  }    section .socialmedia{      background-color: red;      width: 100vw;      height: 15vh;  }  //the divs i'm trying center  section .icon{      margin: 0 auto;      width: 15vw;      height: 15vh;      background-color: green;  }

<section>    <div class="notice">      <h1>our website undergoing construction, please feel free contact on social media.</h1>    </div>    <div class="socialmedia">      <div class="icon"></div>      <div class="icon"></div>      <div class="icon"></div>      <div class="icon"></div>    </div>  </section>

.socialmedia { text-align: center; } .icon { display: inline-block; } 

and remove float .icon.