Why won't my footer readjust to smaller screen sizes?
<p>I have the webpage that I am working on. Everything about it works out properly in terms of responsiveness, however, only the footer doesn't work properly. I would like for the 3 sections of the footer to be displayed underneath each other when the screen is made smaller. Any help here is greatly appreciated. Check out my code below:</p>

<p>HTML:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html &gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Papia&lt;/title&gt;  
    &lt;link rel="stylesheet" href="css/style.css"&gt;  
&lt;/head&gt;
&lt;body&gt;
    &lt;!--- This is the path to the image that will display on mobile ---&gt;
    &lt;video poster="assets/backupimage.jpg" id="bgvid" playsinline autoplay muted loop&gt;
        &lt;!--- Inlcude the video files with .webm file first ---&gt;
        &lt;source src="assets/papia.webm"&gt;
        &lt;source src="assets/papia.mp4"&gt;
        &lt;source src="assets/papia.mov"&gt;
    &lt;/video&gt;
    &lt;div id="topLeft"&gt;
        &lt;img src="assets/papia-logo-secondary.svg"&gt;
    &lt;/div&gt;
    &lt;div id="topRight"&gt;
        &lt;a href="http://www.google.com" target="_blank"&gt;Find a table&lt;/a&gt;
    &lt;/div&gt;
    &lt;div id="logo"&gt;
        &lt;img src="assets/papia-logo-main.svg"&gt;
    &lt;/div&gt;
    &lt;div id="left"&gt;
        &lt;p&gt;4:30pm - close (kitchen closes at 11pm)&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="centre"&gt;
        &lt;a href="" target="_blank"&gt;Facebook&lt;/a&gt;
        &lt;a href="" target="_blank"&gt;Instagram&lt;/a&gt;
        &lt;a href="" target="_blank"&gt;Twitter&lt;/a&gt;
    &lt;/div&gt;
    &lt;div id="right"&gt;
        &lt;p&gt;64 Welfare Road, Cole Bay, Sint Maarten&lt;/p&gt;
    &lt;/div&gt;
    &lt;!---
    This is an option button that will pause the video background
    &lt;div&gt;
        &lt;button&gt;Pause&lt;/button&gt;
    &lt;/div&gt;
    ---&gt;
    &lt;script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'&gt;&lt;/script&gt;
    &lt;script src="js/index.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>CSS:</p>

<pre><code>    #left{
    position: absolute;
    float: left;
    bottom: 0;
    left: 20px;
    color: white;
}
#centre{
    position: absolute;
    float: left;
    margin-left: 40%;
    bottom: 10px;
    clear: inherit;
    min-width: 300px;
}
#right{
    position: absolute;
    float: left;
    margin-left: 78%;
    bottom: 0;
    color: white;
}

@media screen and (max-width: 500px) { 
  div{display: block}
}
@media screen and (max-device-width: 800px) {
  html { background: url(assets/backupimage.jpg) #000 no-repeat center center fixed; }
  #bgvid { display: none; }
  div{display: block}
}
</code></pre>