Aligning text to right and justify the icon

Question

As you can see the picture above, i want to align the text in the circle to right also i tried to justify the icon of font awesome but its not working. Can someone help me? or give me some ideas how to do it.

here is my html code.

             <nav class="navbar navbar-default navbar-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
                <span class="icon-bar" ></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>  
            </button>
            <img class="img-responsive" src="images/brandz.png" >
        </div>

    <div class="collapse navbar-collapse" id="nav-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#">Students</a></li>
            <li><a href="#">Faculty</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Contact us</a></li>

        </ul>

        <ul class="nav navbar-nav navbar-right">
                    <li><a data-toggle="modal" href="#myModal" ><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                    <!-- Modal -->
                        <div id="myModal" class="modal fade" role="dialog">
                            <div class="modal-dialog">
                    <!-- Modal content-->
                             <div class="modal-content">
                                 <div class="modal-header">
                                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                                 </div>
                                 <div class="modal-body">
                                    <p>Some text in the modal.</p>
                                 </div>
                                 <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                 </div>
                             </div>
                            </div>
                       </div>
        </ul>
    </div>
</div>
</nav>

<footer class="text-center">
    <div class="footer-above">
        <div class="container">
            <div class="row">
                <div class="footer-col col-md-4">
                    <h4>GAPC MISSION & VISION</h4>
                    <h4>Mission</h4>
                    <p>To provide affordable learning with emphasis on relevant, innovative and quality academic programs and services.</p>
                    <br>
                    <h4>Vision</h4>
                    <p>A model learning institution that makes a positive difference and is responsive to the needs of the global community.</p>
                </div>

                <div class="footer-col col-md-4">
                    <h4>CORE VALUES</h4>
                    <h4>G - God Fearing</h4>
                    <h4>A - Achiever</h4>
                    <h4>P - Purpose Driven</h4>
                    <h4>C - Committed Leadership</h4>
                </div>

                <div class ="footer-col col-md-4">
                    <h4>GAPC SUPPORT</h4>
                    <h4 class ="fa fa-map-marker">Address</h4>
                    <p>1045 M. Naval St., San Jose, Navotas City</p>
                    <h4 class ="fa fa-phone">Tel No.</h4>
                    <p>282-9035 / 282-9036 / 282-2940</p>
                </div>

            </div>
        </div>
    </div>
    <div class="footer-below">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                      Copyright &copy 2016. Governor Andres Pascual College. All Rights Reserved
                </div>
            </div>
        </div>
    </div>
</footer>

here is my css

.navbar-default .navbar-nav > li > a {
 font-weight: 590;
 color: #949494;
 display: block;
 padding: 5px 35px 2px 45px;
 border-bottom: 3px solid transparent;
 line-height: 97px;
 text-decoration: none;
 transition: border-bottom-color 0.5s ease-in-out;
 -webkit-transition: border-bottom-color 0.5s ease-in-out; 
 }
 .navbar-default{
 background-color:#fff;

 }
 .nav>li>a {
 position: relative;
 }
.navbar-default .navbar-right > li > a {
 padding-left: 70px;
 padding-right: 1px;
 }
.navbar-default .navbar-toggle .icon-bar {
 background-color: #000000;
 margin:0 0 4px;
 width: 25px;
 height: 5px;

}
@media (max-width: 768px) {
.img-responsive{
    width: 300px;
    height:50px;
    padding-left:50px;
}
}
@media (max-width: 376px) {
.img-responsive{
    width: 220px;
    height:50px;
    padding-left: 20px;
}
}
@media (max-width: 286px) {
.img-responsive{
    width: 180px;
    height:50px;
    padding-left: 5px;
 }
}
 .nav.navbar-nav > li{
 display: :inline-block;
 }
 .nav.navbar-nav{
 list-style-type:none;
 }
 .nav.navbar-nav > li > a:hover{
    color:#a92419;
   border-bottom-color: #a92419;
  }

  .navbar-default .navbar-toggle .icon-bar {
  background-color:#a92419 ;
  margin:0 0 4px;
  width: 25px;
  height: 5px;

  }
  .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover        {
  background: none;
  }
  button.navbar-toggle{
  background:none;
  border:none;
  color:#000;

}


footer {
color:#fff;
position:absolute;
bottom:0;
width:100%;
height:10px


 }
 footer h4,p {
 margin-bottom: 20px;
 font-family: Oswald;
 text-align:justify;

 }

footer .footer-above {
padding-top: 80px;
background-color: #a92419 ;
}

footer .footer-col {
margin-bottom: 50px;
margin-right: 100px;

}

footer .footer-below {
padding: 25px 0;
background-color: #fff;
color:#949494;;

}

Answer 1

You need to change the margin to padding on "footer .footer-col"

footer .footer-col {
margin-bottom: 50px;
padding-right: 100px;
}

Also, you need to shift the FontAwesome classes onto something besides the h4's, maybe an i instead like here:

https://jsfiddle.net/e16vwtw9/1/

Answer 2

You need to use the Float:right line of code within your CSS that governs that chunk of text. See here for it's definition and here to see an example of it in action and how it is implemented in code. Hope this helps!