How to make my footer background span the whole viewport?-CodePudding

I am having difficulties making my footer background colour span the whole viewport. Hope someone can point me to the right direction! Thanks!

[![Footer background colour is not spanning the whole viewport](https://i.stack.imgur.com/EhWF4.png)](https://i.stack.imgur.com/EhWF4.png)

<footer>
    <div id="top-footer">
        Hong Kong
    </div>
    <div id="bottom-footer">
        <a href="https://support.google.com/websearch/?p=ws_results_help&hl=en-HK&fg=1">Help</a>
        <a href="https://policies.google.com/privacy?hl=en-HK&fg=1">Privacy</a>
        <a href="https://policies.google.com/terms?hl=en-HK&fg=1">Terms</a>
    </div>
</footer>

        #top-footer, #bottom-footer {
            
            margin: 0;
            padding: 1rem 2rem;
            height: 1rem;
            font-size: medium;
            
        }
        #bottom-footer > a {
            display: inline;
            padding-right: 2rem;
            margin: 0;
            font-size: medium;
        }
        footer {
            margin-top: 2rem;
            background-color: grey;
            width: 100%;
        }

CodePudding user response：

To remove the body's default margin, just add:

body {
  margin: 0;
}

Your new CSS styles:

body {
  margin: 0;
}

#top-footer,
#bottom-footer {

  margin: 0;
  padding: 1rem 2rem;
  height: 1rem;
  font-size: medium;

}

#bottom-footer>a {
  display: inline;
  padding-right: 2rem;
  margin: 0;
  font-size: medium;
}

footer {
  margin-top: 2rem;
  background-color: grey;
  width: 100%;
}

CodePudding user response：

just add body{margin:0;}

#top-footer,
#bottom-footer {
  margin: 0;
  padding: 1rem 2rem;
  height: 1rem;
  font-size: medium;
}

#bottom-footer>a {
  display: inline;
  padding-right: 2rem;
  margin: 0;
  font-size: medium;
}

footer {
  margin-top: 2rem;
  background-color: grey;
  width: 100%;
}
body{margin:0;padding:0;border:solid 1px red;}

<footer>
  <div id="top-footer">
    Hong Kong
  </div>
  <div id="bottom-footer">
    <a href="https://support.google.com/websearch/?p=ws_results_help&hl=en-HK&fg=1">Help</a>
    <a href="https://policies.google.com/privacy?hl=en-HK&fg=1">Privacy</a>
    <a href="https://policies.google.com/terms?hl=en-HK&fg=1">Terms</a>
  </div>
</footer>