#header .head-social {
background-color: #7DC651;
width: 100%;
height: 37.48px;
}
#header .head-social h3 {
color: white;
font-size: 13px;
margin-top: 12px;
font-family: 'Open Sans';
text-align: right;
display: inline-block;
}
.social-links {
display: -webkit-inline-box;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="header">
<div class="head-social">
<div class="container">
<h3>I am a pretty website website, 12345</h3>
<div class="social-links">
<div class="facebook"><a href="www.facebook.com"><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></a></div>
<div class="twitter"><a href="www.twitter.com"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></a></div>
<div class="youtube"><a href="www.youtube.com"><i class="fa fa-youtube fa-lg" aria-hidden="true"></i></a></div>
<div class="instagram"><a href="www.instagram.com"><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></a></div>
<div class="google"><a href="www.google.com"><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i></a></div>
</div>
</div>
</div>
</div>
The text h3 and the fa-classes doesn’t seem to align to the right of the div head-social. They are always on the left side of the div.
3
Answers
use
float
instead oftext-align
set
container to float:right in css
i hope it helpful for you
Try with it :
1. With align right :
With float right :
.container { float:right; }
Try this…