skip to Main Content
#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


  1. use float instead of text-align

    set container to float:right in css

    i hope it helpful for you

    #header .head-social {
      background-color: #7DC651;
      width: 100%;
      height: 37.48px;
    }
    
    #header .head-social h3 {
      color: white;
      font-size: 13px;
      margin-top: 12px;
      margin-left: 5px;
      font-family: 'Open Sans';
      display: inline-block;
    }
    
    .social-links {
      display: -webkit-inline-box;
      margin-top: 12px;
      margin-left: 5px;
    }
    
    .container {
      float: right;
    }
    <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>
    Login or Signup to reply.
  2. Try with it :
    1. With align right :

    <div id="header">
            <div class="head-social">
                <div class="container" align="right>
                    <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>
    
    1. With float right :

      .container { float:right; }

    Login or Signup to reply.
  3. Try this…

    #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;
    }
    #header .head-social { 
      text-align:right; 
    } //added this line
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search