css - How do I center 2 divs next to each other with space between other div's that doesn't increase on window resize -

i can't manage center 2 <div>s of mine next each other without spaces between divs growing or shrinking on window resize.

the problem want 2 divs have 5px space between them (in exact middle , few px space outer sides also, can't work.

when set width 49% space in middle increasing on window resize , when set width 50% 2 <div>s supposed next each other go underneath each other on lower windows size.

i basicly want containers have minimum width no maximum width, containers grow or shrink on window resize spaces between containers should stay big are, time.

i'd happy basic example how can done:

http://gyazo.com/1c2f3c4a639580f46d16f7e65a52a46a

    .container{      border-radius: 5px;      background-color:#6f0098;      box-sizing: border-box;      width:49%;     height:auto;      min-width:700px;      padding:3px;      overflow:hidden;      margin:auto; }  .inner_container{      border-radius: 0px 0px 5px 5px;      background-color:#343434;      box-sizing: border-box;      width:100%;     height:auto;      box-sizing: border-box;      padding:5px;      overflow:hidden;      color:#cccccd; } 

flexbox solution 1 of alternatives older approach.

.wrap {    display: flex;    justify-content: center;  }  .box {    background: tomato;    width: 100px;    height: 100px;    margin: 0 5px;  }

<div class="wrap">    <div class="box"></div>    <div class="box"></div>  </div>