Footer element being offset by other elements - html

Question

I have been messing with this for hours and cannot figure out what the problem is.
I have a basic Local Weather App I've created for practice. When I add my footer to the bottom of the page it is automatically offset to the right from the center. Regardless of the position property set, I cannot use text-align:center or margin:auto to center the element.
HTML:
<div id='content-box'>
<div id='weather'>
<p id='temp'></p>
<p id='humidity' class='other'></p>
<p id='wind' class='other'></p>
<img id='icon' src=''>
</div>
<p id='location'></p>
</div>
<footer>FOOTER</footer>
CSS:
#content-box{
position:relative;
text-align:center;
width:33%;
margin:auto;
height:350px;;
background-color:rgba(0,0,0,0.1);
border-radius: 35px;
}
#weather{
font-size:3em;
}
#temp{
position:relative;
bottom:50px;
float:left;
font-size:3em;
font-family:Arial;
padding-left:20px;
color:#329555;
}
#temp:hover{
opacity:.8;
cursor:pointer;
}
span{
font-family:'Raleway', sans-serif;
}
.other{
font-size:.5em;
width:auto;
text-align:right;
padding: 10px 20px 0px 0px;
font-family:sans-serif;
}
#location{
position:absolute;
bottom:0px;
width:100%;
font-size:1.7em;
letter-spacing: 8px;
font-family:'Raleway';
}
#icon{
position:relative;
padding-top:10px;
display:flex;
float:right;
bottom:40px;
width:175px;
}
footer{
position:relative;
margin-top:50px;
}
My code is also on codepen, so it may be easiest for one to actually see the bug in action.
On the click event to convert Fahrenheit to Celsius it is also pushing the footer to the right, for which I am also lost as to why this is.

Answer 1

CODEPEN example,
What I had changed is,
footer{
position: relative;
clear:both;
}
and removed all the margins and paddings in body,
html, body{
height:100%;
margin:0;
padding:0;
}
Now you can even text align in your footer section too
footer{
position: relative;
clear:both;
text-align:center;
}
CODEPEN example for text-align

Answer 2

You can try this:
<footer>
<div style="
margin: 0 auto;
width: fit-content;
width: -webkit-fit-content;
">Code By Michael Ryan</div>
</footer>
It worked for me.

Answer 3

use clear: both;
The clear CSS property specifies whether an element can be next to
floating elements that precede it or must be moved down (cleared)
below them. The clear property applies to both floating and
non-floating elements.
var main = function(){
function getLocation(){
$.get('http://ip-api.com/json', function(loc){
$('#location').html(loc.city + ", " + loc.region + " " + loc.zip);
getWeather(loc.lat, loc.lon);
});
}
function getWeather(lat,lon){
var url = 'http://api.openweathermap.org/data/2.5/weather?lat=' +
lat + '&lon=' + lon + '&units=imperial' + '&type=accurate' +
'&APPID=ab4b9ad58133c89326de9f6ae59d7b66';
$.get(url, function(weatherInfo){
var temp = Math.round(weatherInfo.main.temp),
tempC = Math.round((temp - 32) * 5/9),
humidity = weatherInfo.main.humidity,
wind = weatherInfo.wind.speed,
icon = 'http://openweathermap.org/img/w/' + weatherInfo.weather[0].icon +'.png';
$('#temp').html(temp + '°<span>F</span>');
$('#humidity').html('Humidity: ' + humidity + '%');
$('#wind').html('Wind Speed: ' + wind + 'mph');
$('#icon').attr('src', icon);
$('#temp').click(function(){
if ($('#temp').text().indexOf('F') !== -1)
$('#temp').html(tempC + '°<span>C</span>');
else
$('#temp').html(temp + '°<span>F</span>');
})
});
}
getLocation();
}
$(document).ready(main);
html{
background:url('http://g01.a.alicdn.com/kf/HTB14WXBJVXXXXaSXFXXq6xXFXXXQ/Hot-Selling-Vinyl-4x5ft-Backdrop-Sunshine-Sea-Flowers-Photography-New-Portrait-Digital-Wedding-Backgrounds-1-25.jpg_640x640.jpg');
background-repeat:no-repeat;
background-size:cover;
}
body{position:relative;}
html, body{
height:100%;
}
header{
text-align:center;
font-size:2em;
letter-spacing:9px;
font-family:'Raleway', sans-serif;
}
h1{
opacity:0.45;
}
#content-box{
position:relative;
text-align:center;
width:33%;
margin:auto;
height:350px;;
background-color:rgba(0,0,0,0.1);
border-radius: 35px;
}
#weather{
font-size:3em;
}
#temp{
position:relative;
bottom:50px;
float:left;
font-size:3em;
font-family:Arial;
padding-left:20px;
color:#329555;
}
#temp:hover{
opacity:.8;
cursor:pointer;
}
span{
font-family:'Raleway', sans-serif;
}
.other{
font-size:.5em;
width:auto;
text-align:right;
padding: 10px 20px 0px 0px;
font-family:sans-serif;
}
#location{
position:absolute;
bottom:0px;
width:100%;
font-size:1.7em;
letter-spacing: 8px;
font-family:'Raleway';
}
#icon{
position:relative;
padding-top:10px;
display:flex;
float:right;
bottom:40px;
width:175px;
}
footer{
position:relative;
margin-top:50px;
clear:both;
}
footer .fix{
text-align: center;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1>Local Weather App</h1>
</header>
<div id='content-box'>
<div id='weather'>
<p id='temp'></p>
<p id='humidity' class='other'></p>
<p id='wind' class='other'></p>
<img id='icon' src=''>
</div>
<p id='location'></p>
</div>
<footer><div class="fix">Code By Michael Ryan</div></footer>
</body>
</html>