Remove footer white space on the left and right side - css

Question

I'm trying to remove the white space on the right and left side of my footer, it keeps making it when I put the code "max-width: 1200px; margin: auto;" to center the content. What other ways can I center the content and at the same time remove the white gaps on both sides?
I tried using margin-top, margin-left, margin-right, bootstrap's pull-left and pull-right, margin and padding set to 0, width:100% etc. Nothing worked.
Thanks.
My code is this:
body {
margin-left: 0;
padding: 0;
}
footer{
position: relative;
bottom: 0;
max-width: 1200px;
margin: auto;
overflow-x: hidden;
}
.footer-distributed{
background-color: #2c2c2c;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
width: 100%;
text-align: left;
font: normal 16px 'Varela Round';
padding: 20px 50px;
margin-top: 10px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right, .mapouter .gmap_canvas{
display: inline-block;
vertical-align: top;
}
.footer-distributed .footer-left{
width: 40%;
}
.footer-distributed h3{
color: #ffffff;
font: normal 36px 'Varela Round', cursive;
margin: 0;
}
.footer-distributed h3 span{
color: #ffffff;
}
.footer-distributed .footer-links{
color: #ffffff;
margin: 20px 0 12px;
padding: 0;
}
.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-company-name{
color: #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}
.footer-distributed .footer-center{
width: 35%;
padding-top:18px;
}
.footer-distributed .footer-center i{
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}
.footer-distributed .footer-center i.fa-envelope{
font-size: 17px;
line-height: 38px;
}
.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin:0;
}
.footer-distributed .footer-center p span{
display:block;
font-weight: normal;
font-size:14px;
line-height:2;
}
.footer-distributed .footer-center p a{
color: #cd2030;
text-decoration: none;
}
.footer-distributed .footer-right{
width: 20%;
padding-top:18px;
}
.footer-distributed .footer-company-about{
line-height: 20px;
color: #92999f;
font-size: 13px;
font-weight: normal;
margin: 0;
}
.footer-distributed .footer-company-about span{
display: block;
color: #ffffff;
font-size: 17px;
font-weight: normal;
margin-bottom: 20px;
}
.footer-distributed .footer-icons{
margin-top: 25px;
}
.footer-distributed .footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-right: 3px;
margin-bottom: 5px;
}
#media (max-width: 880px) {
.footer-distributed{
font: bold 14px 'varela round';
}
.copyright-info, .credit {
width: 100%;
text-align: center;
display: block;
vertical-align: middle;
margin-left: 0px;
margin-right: 0px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: block;
width: 100%;
margin-bottom: 40px;
text-align: center;
}
.footer-distributed .footer-center i{
margin-left: 0;
}
.main {
line-height: normal;
font-size: auto;
}
}

Answer 1

Use flexbox. All the elements within your footer will automatically center within the parent.
footer {
background-color: #2c2c2c;
position: relative;
bottom: 0;
left: 0;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
.footer-distributed {
padding: 1em;
display: flex;
align-items: flex-start;
justify-content: center;
max-width: 1200px;
width: 100%;
}