Как разместить две картинки друг от друга?

#header { 
  position: relative; 
  width: 100%; 
  height: 501px; 
  background: url(http://conceptartworld.com/wp-content/uploads/2013/09/Tank_Concept_Art_by_Chad_Weatherford_01.jpg); 
} 
#inner_wrap_logo { 
  position: relative; 
  margin: 0; 
  width: 100%; 
  height: 100%; 
}

<div id="header"> 
  <div id="inner_wrap_logo"> 
    <img src="https://upload.wikimedia.org/wikipedia/commons/8/8a/CoA_of_Russian_Empire_(1730).png" style="width: 194px; height: 214px;"> 
    <img src="http://abali.ru/wp-content/uploads/2011/08/korolevskiy_Royal_CoA_of_Norway.png" style="width: 194px; height: 214px;float:right;"> 
  </div> 
</div>

Вариант 1 flex:

#header{
position: relative;
width: 100%;
height: 501px;
background: url(../img/header2.jpg);
}
#inner_wrap_logo{
margin: 0 auto;
width: 960px;
height: 100%;  
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    align-content: center;
    justify-content: space-between;
}

Вариант 2 float:

#header{
position: relative;
width: 100%;
height: 501px;
background: url(../img/header2.jpg);
}
#inner_wrap_logo{
margin: 0 auto;
width: 960px;
height: 100%;  
overflow: hidden;
}
#inner_wrap_logo img:first-of-type{
  float:left;
}
#inner_wrap_logo img:last-of-type{
  float:right;
}

...

<div id='one'>
  Text 1
</div>
<div id='two'>
  Текст 2
</div>

#one, #two
{
  position: absolute;
  top: 10px;
  left: 10px;
}