center align footer with margin to bottom of page

Question

I have a footer which I am trying to add some margins to and align it to the center. The problem is when I shrink the page size for mobile breakpoints the footer button is not center aligned anymore and margin to the right becomes less than the left. Could someone guide me what I might be missing

Running example

CSS :

#footer {
display: flex;
align-content: center;
justify-content: center;
margin: 20px;
position: fixed;
width:90%;
bottom: 0;
}

#footer {
background: #0070FF;
line-height: 2;
text-align: center;
color: #042E64;
font-size: 30px;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0 1px 0 #84BAFF;
box-shadow: 0 0 15px #00214B
}

HTML:

<div id="footer">Footer - Just scroll...</div>

Answer 1

There are many ways to do this, but the simplest solution with your code above is to use calc. The problem is that you're mixing percentages and fixed values - but that's exactly what calc is meant to help solve.

Here's what I did:

• Changed the width from 90% to calc(100% - 40px) (20px on each side)
• Set left to 20px
• Set bottom to 20px;

#footer {
display: flex;
align-content: center;
justify-content: center;
left: 20px;
position: fixed;
width: calc(100% - 40px);
bottom: 20px;
}

#footer {
background: #0070FF;
line-height: 2;
text-align: center;
color: #042E64;
font-size: 30px;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0 1px 0 #84BAFF;
box-shadow: 0 0 15px #00214B
}

<div id="footer">Footer - Just scroll...</div>