Hello everyone. Guys how can I float the div(.footer-right) to the right side. I tried (float: right), (right:0), and something like these but it didn't work? Can anybody solve this problem??? Thanks in advance!!!

.footer {
  overflow: hidden;
  margin: 0 50px;
  display: inline-flex;
  padding: 80px 0 16px 0;
  float: left;
}

.footer .fab {
  width: 80px;
  height: auto;
  padding: 0 24px 0 0;
}

.footer-right a {
  font-family: "Noto Serif", serif;
  display: block;
  text-align: center;
  float: left;
  position: relative;
  text-decoration: none;
  font-size: 14px;
  color: #000;
  padding: 0 17px;
}

.footer-right {
  float: left;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="footer">
  <a href="#"><i class="fab fa-facebook"></i>Facebook</a>
  <a href="#"><i class="fab fa-instagram"></i>Instagram</a>
  <a href="#  "><i class="fab fa-linkedin"></i>Linkedin</a>

  <div class="footer-right">
    <a href="">©2020 Grovemade</a>
    <a href="">Terms & Conditions</a>
    <a href="">Privacy Policy</a>
    <a href="">Site by Department </a>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

replace footer with this code

.footer {
  overflow: hidden;
  margin: 0 50px;
  /* display: inline-flex; */ 
  padding: 80px 0 16px 0;
  /* float: left; */
}

CodePudding user response：

Add these properties to your respective css classes and it will work.

.footer{
 position: relative;
}
.footer-right{
 position: absolute;
right: 0;
}