Learn CSS Variables by Building a City Skyline - Step 7

HTML-CSS
1

Tell us what’s happening:
Hi, I have a question about my code based on the instruction of the project. Why do I have to put “overflow: hidden;” for my body element to hide the overflow from the “100vh” of its height?
If the overflow will be hidden, why set its height like that in the first place? I found that using “margin:0;” have already done the purpose
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">    
  <head>
    <meta charset="UTF-8">
    <title>City Skyline</title>
    <link href="styles.css" rel="stylesheet" />
  </head>

  <body>
  </body>
</html>

/* file: styles.css */
* {
  border: 1px solid black;
  box-sizing: border-box;
}


/* User Editable Region */

body{
  height: 100vh;
  margin: 0;
  overflow: ;
}


/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: Learn CSS Variables by Building a City Skyline - Step 7

Link to the challenge: