The right html and css code for the footer-CodePudding

The footer of the web is not having a correct position and I tried everything, here is my code!(HTML)

footer {  
    background-color: #333;
    padding: 50px;
    font-size: 80%;
   }

<script src="https://kit.fontawesome.com/9c668c8ddc.js" crossorigin="anonymous"></script>
<footer>
  <div class="row">
    <div class="col span-1-of-2">
      <ul class="footer-nav">
        <li><a href="#">About us</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Press</a></li>
        <li><a href="#">iOS App</a></li>
        <li><a href="#">Android App</a></li>
      </ul>
    </div>
    <div class="col span-1-of-2">
      <ul class="social-links">
        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
      </ul>
    </div>
  </div>
  <div class="row">
    <p>
      Copyright &copy; 2015 by Omnifood. All rights reserved.
    </p>
  </div>
</footer>

Since i have tried a lot of code combinations and still it wont work, could it be a syntax error?(some CSS)

Also, I would like to add a pic of how it looks. website footer

CodePudding user response：

<!-- CONTAINER START -->
<footer class="container-fluid text-center mb-1 bg-light">


<!--  ROW START  -->
<div class="row">

<!--  COLUMN START  -->
<div class="col-md-4">

<h3 class="text-secondary my-2">Company</h3>

<p class="text-capitalize text-light">
<a href="term.html">
Terms & conditions<br>privacy policy
</a>
</p>


</div>
<!--  COLUMN END  -->

<!--  COLUMN START  -->
<div class="col-md-4 my-2">
<h3 class="text-secondary">Get Assistance</h3>
<p class="text-secondary">Email ID:[email protected]</p>
<p><a href="contact.html">
Contact Us:020 67473400
</a></p>

  

</div>
<!--  COLUMN END  -->

<!--  COLUMN START  -->
<div class="col-md-4 my-2">
<h3 class="text-secondary">Locate Us</h3>
<p><a href="contact.html">
Head Office
</a></p>

<p><a href="member.html">
  Center
</a></p>
  

</div>
<!--  COLUMN END  -->
  
</div>
<!--  ROW END   -->
<hr>

<div class="row">

<div class="col-md-12 pb-4">
  <h4 class="text-danger font-weight-bolder">follow us :</h4>
<a href="https://en-gb.facebook.com/login/"><i class="fab fa-facebook mx-2 text-danger"></i></a>
<a href="https://twitter.com/LOGIN"><i class="fab fa-twitter mx-2 text-danger"></i></a>
  <a href="https://www.youtube.com/index"><i class="fab fa-youtube mx-2 text-danger"></i></a>
  <a href="https://accounts.google.com/signin/v2/identifier?flowName=GlifWebSignIn&flowEntry=ServiceLogin"><i class="fab fa-google-plus-g mx-2
    text-danger"></i></a>

</div>
<!--  COLUMN END   -->
  

</div>
<!--  ROW END   -->


<!-- CONTAINER END -->
</footer>

CodePudding user response：

do you want to make <ul> <li> horizontal? you can try like this How to make a display in a horizontal row

CodePudding user response：

I think this is what you trying to achieve.

a,li{
  list-style:none;
  text-decoration:none;
  color:grey;
}
footer{
  background:#333333;
}
.row{
  display:flex;
  justify-content:space-between;
  font-size:17px;
  font-family:arial;
  font-weight:100;

}

.footer-nav{
    display:flex;
    
}
.footer-nav li{
  margin:5px 15px 5px 2px ;
}
.social-links li{
  margin:5px 15px 5px 2px ;
}
.social-links{
    display:flex;
}

.copyright{
  display:flex;
  justify-content:center;
  color:grey;
   font-size:12px;
  font-family:arial;
}

<script src="https://kit.fontawesome.com/9c668c8ddc.js" crossorigin="anonymous"></script>
<footer>
  <div class="row">
    <div class="col span-1-of-2">
      <ul class="footer-nav">
        <li><a href="#">About us</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Press</a></li>
        <li><a href="#">iOS App</a></li>
        <li><a href="#">Android App</a></li>
      </ul>
    </div>
    <div class="col span-1-of-2">
      <ul class="social-links">
        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
      </ul>
    </div>
  </div>
  <div class="copyright">
    <p>
      Copyright &copy; 2015 by Omnifood. All rights reserved.
    </p>
  </div>
</footer>