stop `inline-block` and then start again - css

Question

On a page of mine I have two elements (let's name them X and Z) styled with inline-block, so they are positioned one next to the other.
Right below them I want to place three elements (let's name them A,B,C), one next to the other again.
When I insert element A with inline-block, it goes next to Z.
If I apply clear:both to A, then it goes under (so that's good) but if I also apply inline-block to A, then A, B and C go right next to X and Z! How can I override this?
.header h1 {
text-align: center;
}
.map img{
width: 100%;
height: 100%;
}
.logo {
display: inline-block;
float: left;
}
.logo img {
display: block;
margin: auto;
}
.info {
padding: 5px ;
display: inline-block;
float: left;
background-color: #c0dfd9
}
.column1 {
width: 45%;
}
<div class="container" id="contact"> <!-- /CONTACT -->
<div class="map">
<img src="img/map.jpg" alt="map">
</div>
<div class="header">
<h1 id="contactheader">Contact me</h1>
<div>
<div class="logo column1">
<img src="img/logo.png" alt="logo">
</div>
<div class="info column1">
<p><span class="glyphicon glyphicon-user"></span><strong>Email:</strong>John#john.com</p>
<p><span class="glyphicon glyphicon-home"></span><strong>Address:</strong>Plateia Karitsi 25</p>
<p><span class="glyphicon glyphicon-asterisk"></span><strong>Telephone:</strong>[phone]</p>
</div>
</div> <!-- /END CONTACT -->
<br>
<footer>
<div id="copyright">©John 2016</div>
<div id="twitterbutton">Follow #aptbs</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<div class="fb-like" data-href="https://www.facebook.com/QOTSA/?fref=ts" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
</footer>

Answer 1

Line break: https://developer.mozilla.org/en/docs/Web/HTML/Element/br
div {display: inline-block; padding: 8px 12px; background: #ccc; margin: 4px}
<div>x</div>
<div>z</div>
<br>
<div>a</div>
<div>b</div>
<div>c</div>
No need to complicate simple things.
Here's your code modified by what I wrote in the comment:
You need to remove float rules from X and Z. And then you won't even need the <br> because they're in separate blocks. Also, make sure A, B and C are inline-blocks as well (they are blocks now).
.header h1 {text-align: center;}
.map img{width: 100%; height: 100%;}
.logo, #twitterbutton, #copyright, .fb-like {display: inline-block;}
.logo img {display: block; margin: auto;}
.info {padding: 5px; display: inline-block; background-color: #c0dfd9}
.column1 {width: 45%;}
<div class="container" id="contact"> <!-- /CONTACT -->
<div class="map">
<img src="img/map.jpg" alt="map">
</div>
<div class="header">
<h1 id="contactheader">Contact me</h1>
<div>
<div class="logo column1">
<img src="img/logo.png" alt="logo">
</div>
<div class="info column1">
<p><span class="glyphicon glyphicon-user"></span><strong>Email:</strong>John#john.com</p>
<p><span class="glyphicon glyphicon-home"></span><strong>Address:</strong>Plateia Karitsi 25</p>
<p><span class="glyphicon glyphicon-asterisk"></span><strong>Telephone:</strong>[phone]</p>
</div>
</div> <!-- /END CONTACT -->
<footer>
<div id="copyright">©John 2016</div>
<div id="twitterbutton">Follow #aptbs</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<div class="fb-like" data-href="https://www.facebook.com/QOTSA/?fref=ts" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
</footer>