How to position DIV within Wordpress - html

Question

I'm trying to have 3 x 340px wide boxes (used for holding social media feeds) next to each other. I've got the first 2 lined up perfectly but the 3rd is not lining up.
I'm using a custom html field in wordpress. Code is below:
<div style="width:100%;height:500px;float:center;">
<div style="width:340px;height:500px;float:left;background-color:red;">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/consciousyouthuk" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/consciousyouthuk" class="fb-xfbml-parse-ignore">Conscious Youth C.I.C</blockquote></div></div>
<div style="margin:0 auto;width:340px;height:500px;background-color:red;">
<a class="twitter-timeline" data-width="340" data-height="500" href="https://twitter.com/Cyouthcic?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></div>
<div style="width:340px;height:500px;float:right;background-color:red;">
</div>
</div>
Image here shows what it's doing:

Answer 1

Hi you can do this easily by using bootstrap grid. check the jsfiddle output :: https://jsfiddle.net/ruokr7rp/1/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm" style="background-color:red;">
<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-page" data-href="https://www.facebook.com/consciousyouthuk" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false">
<blockquote cite="https://www.facebook.com/consciousyouthuk" class="fb-xfbml-parse-ignore">Conscious Youth C.I.C</blockquote>
</div>
</div>
<div class="col-sm" style="background-color:red;">
<a class="twitter-timeline" data-width="340" data-height="500" href="https://twitter.com/Cyouthcic?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="col-sm" style="background-color:red;">
</div>
</div>
</div>
check this :: https://jsfiddle.net/ruokr7rp/