html - My footer Alignment

Question

I am trying to make footer to the center when it reaches the lg break point, the three columns should be seen as one column in 3 rows, and i want to achieve it at the center portion of the page.

But if you see in the codepen link below the second one isn't aligning bottom to the first one.

https://codepen.io/Sunny143/pen/VybbGX?editors=1100

footer {
  margin-left: 0;
  margin-right: 0;
  background-color: #305C7A;
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: auto;
}

footer h3 {
  color: white;
  text-decoration: underline;
  text-decoration-color: white;
}

footer p {
  color: white;
  width: 100%;
  align-content: center;
  align-items: center;
  justify-content: center;
}

footer span {
  color: white;
}

.address {
  float: left;
  padding: 35px;
  padding-bottom: 50px;
  width: 30%;
  margin-left: 4%;
  margin-right: 4%;
}

.Main-address {
  float: left;
  width: 30%;
  padding: 35px;
  text-align: left;
  margin-left: 4%;
  margin-right: 4%;
}

.contact-info {
  float: left;
  position: relative;
  padding-bottom: 50px;
  padding: 35px;
  width: 30%;
  text-align: left;
  margin-left: 4%;
  margin-right: 4%;
  margin-bottom: 35px;
}

.copyright {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 35px;
  background-color: #111B22;
  align-items: center;
  margin-bottom: 0%;
}

<footer>
  <!-- starting of a footer-->
  <section class="address col-lg-3 col-md-12 col-sm-12">
    <h3>Branch Office</h3>
    <span class="Name">SambaSiva Rao Muvva</span><br>
    <span class="qual">B.com., A.C.A</span>
    <p>23-5-93, Besides Bank of India<br> Naidupet 1st lane<br> Koritepadu, Guntur-7</p>
  </section>
  <section class="Main-address col-lg-3 col-md-12 col-sm-12">
    <h3>Head Office</h3>
    <span class="Name">Konduru Anil Kumar</span><br>
    <span class="qual">B.com., A.C.A</span>
    <p>No 4, 2nd floor<br> Rangarajulu Street, Ayyavoo colony<br> Aminjikarai, Chennai-29</p>
  </section>
  <Section class="contact-info col-lg-3 col-md-12 col-sm-12">
    <h3>Contact Information</h3>
    <span class="ph">Ph.No:</span><span class="numbers"> xxx-xxxxxxx<br>+91 9985985473<br>+91 8125173473</span><br>
    <span class="Email-ID">Email :</span><span class="email">[email protected]</span>
  </Section>
  <p class="text-center copyright">Copyright @ 2017 indusfilings.com</p>
</footer>

Answer 1

None of the block are centered because the 3 are floating and you are simply facing floating issue as the first one is pushing the third one to be under the second one like you can read in this question: Floated elements of variable height push siblings down

Instead you need to simply remove float and correctly use the bootstrap classes (container/row) and your div will behave correctly. Then you may add text-align:center when reaching the breakpoint of lg:

footer {
  margin-left: 0;
  margin-right: 0;
  background-color: #305C7A;
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: auto;
}

footer h3 {
  color: white;
  text-decoration: underline;
  text-decoration-color: white;
}

footer p {
  color: white;
  width: 100%;
  align-content: center;
  align-items: center;
  justify-content: center;
}

footer span {
  color: white;
}

.address,.contact-info,.Main-address  {
  padding: 35px;
}

.copyright {
  width: 100%;
  height: 35px;
  background-color: #111B22;
  align-items: center;
  margin-bottom:0;
}

@media all and (max-width:991px) {
.address,.contact-info,.Main-address  {
  text-align:center;
}

}

<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css">
<footer>
  <div class="container">
    <div class="row justify-content-around">
      <!-- starting of a footer-->
      <section class="address col-lg-3 col-md-12 col-sm-12">
        <h3>Branch Office</h3>
        <span class="Name">SambaSiva Rao Muvva</span><br>
        <span class="qual">B.com., A.C.A</span>
        <p>23-5-93, Besides Bank of India<br> Naidupet 1st lane<br> Koritepadu, Guntur-7</p>
      </section>
      <section class="Main-address col-lg-3 col-md-12 col-sm-12">
        <h3>Head Office</h3>
        <span class="Name">Konduru Anil Kumar</span><br>
        <span class="qual">B.com., A.C.A</span>
        <p>No 4, 2nd floor<br> Rangarajulu Street, Ayyavoo colony<br> Aminjikarai, Chennai-29</p>
      </section>
      <Section class="contact-info col-lg-3 col-md-12 col-sm-12">
        <h3>Contact Information</h3>
        <span class="ph">Ph.No:</span><span class="numbers"> xxx-xxxxxxx<br>+91 9985985473<br>+91 8125173473</span><br>
        <span class="Email-ID">Email :</span><span class="email">[email protected]</span>
      </Section>
    </div>
  </div>
  <p class="text-center copyright">Copyright @ 2017 indusfilings.com</p>
</footer>