I am struggling to align the content within three horizontal divs on an info bar. The center div should be aligned center and the right-hand div should be aligned to the right, but my CSS attempts have not been successful.
My attempts included adding text-align:center to #delivery and text-align:right to #quickshop, as well as trying float:right on #quickshop, but none of these worked.
Here is a snippet of the HTML/CSS code:
#info-bar {
height: 46px;
}
#container {
margin: 0 auto;
width: 82%;
}
.info {
float: left;
width: 37.5%;
margin: 0;
padding: 9px 0;
display: flex;
flex-wrap: nowrap;
align-items: center;
}
#quickquotes.info {
width: 28.5%;
}
#quickshop.info {
width: 34%;
}
#container i {
font-size: 34px;
color: #a6d120;
display: inline-block;
vertical-align: middle;
}
#container i:before {
position: relative;
top: 0px;
}
.icon-quote:before { content: url("http://placehold.it/35x27"); }
.icon-delivery:before { content: url("http://placehold.it/35x27"); }
.icon-quickshop:before { content: url("http://placehold.it/35x27"); }
#container .text-area {
display: inline-block;
text-align: left;
margin-left: 0px;
color: #1e3e57;
letter-spacing: 0.07em;
font-weight: bolder;
text-transform: uppercase;
font-size: 0.8em;
} <div id="info-bar">
<div id="container">
<div id="quickquotes" class="info">
<i class="icon-quote"></i>
<div class="text-area">
Quick Quote Fast Response</div>
</div>
<div id="delivery" class="info">
<i class="icon-delivery"></i>
<div class="text-area">
Free UK Delivery on Orders Over £100</div>
</div>
<div id="quickshop" class="info">
<i class="icon-quickshop"></i>
<div class="text-area">
Quick Shop Search Product Codes</div>
</div>
</div>
</div>A live example of the issue can be seen in this fiddle: https://jsfiddle.net/qafru72o/2/
I am unsure of where I am making a mistake with the alignment. Any guidance would be appreciated.