CSS: three images, one left, one center, one right - html

Question

I'm trying to position three images, one to the left, one to the right, and one in the center, with equal space both sides, but this code is not working:
#header {
background: lightgrey;
background-color: rgba(256, 256, 256, 0.47);
margin: 15px auto 0px auto;
display: block;
height: 80px;
width: 965px;
}
#capçalera1 {
float: left;
margin-left: 15px;
margin-top: 16px;
margin-bottom: 16px;
}
#capçalera2 {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
}
#capçalera3 {
float: right;
margin-right: 15px;
margin-top: 18px;
margin-bottom: 18px;
}
<div id="header">
<div id="capçalera1">
<a href="http://www.uib.cat/">
<img src="/images/logoblue2.png" width=138px height=44px/>
</a>
</div>
<div id="capçalera3">
<a href="http://www.iac3.eu/">
<img src="/images/iac3ieec.jpeg" width=58px height=40px/>
</a>
</div>
<div id="capçalera2">
<img src="/images/test.png" width=531px height=51px/>
</div>
</div>
The left and right images are ok, but the centered one is "glued" to the left one. I want to be able to put it top margin, and to be equally spaced from left and right image.
Thanks for your help!

Answer 1

<div id="header">
<div id="capçalera1">
<img src="/images/logoblue2.png" width=138px height=44px/>
</div>
<div id="capçalera3">
<img src="/images/iac3ieec.jpeg" width=58px height=40px/>
</div>
<div id="capçalera2">
<img src="/images/test.png" width=531px height=51px/>
</div>
</div>
Thats to complicated...
Try this.
<div id="header">
<ul>
<li><img src="/images/logoblue2.png" width=138px height=44px/></li>
<li><img src="/images/iac3ieec.jpeg" width=58px height=40px/></li>
<li><img src="/images/test.png" width=531px height=51px/></li>
</ul>
</div>
CSS
#header ul {
margin: 0;
padding: 0;
}
#header ul li {
display: inline-block //or you can float them,
}
#header ul li:nth-child(even){
margin: 0 10px;
}

Answer 2

you can use one div and three spans like
<div class="container">
<span>
<img ... >
</span>
<span>
<img ... >
</span>
<span>
<img ... >
</span>
css :
.container{ width:50%; margin:0 auto; text-align:center}
.container span{ width:30%; margin:0 1%; }
`

Answer 3

This looks like a job for flexbox! Remove all styling on the capcaleras, and put:
#header {
display: flex;
justify-content: space-around;
background: lightgrey;
background-color: rgba(256, 256, 256, 0.47);
margin: 15px auto 0px auto;
display: block;
height: 80px;
width: 965px;
}
Keep in mind, though, that support for this is not great.