How to get the Footer width to reach full screen

I am making a website for a club and need help fixing the footer.

footer {
  width: 100%;
  background: #222;
  margin: 0 auto;
}

.footer-section {
  float: left;
  width: 33%;
  background: #222;
  color: white;
}

<footer>
  <div class="footer-section">Contact us at : 1015 7th street NW <br>
  </div>
  <div class="footer-section">Hey how you doing</div>
  <div class="footer-section">This weezy F baby</div>
</footer>

I want my footer to reach full browser screen but a tiny part of it on the right is left out and shows my background. I feel it's because using 33% on the width when there's three columns that 1% is showing. Is there anyway to fix this and keep it responsive