As you can see in this image that there is a long black box in the middle of the layout which is set to "height : 100vh" but is getting out of the document flow,whereas as per my understanding it should be inside the viewport of the browser.I cannot find the reason of this CSS behaviour.
` <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Netflix</title><link rel="stylesheet" href="style.css" /><style>*{ margin: 0; padding: 0; box-sizing: border-box;}header{ position: absolute;}.navbar img{ width: 140px;}.hero-section{ background-image: url(assets/images/hero-section-bg-image.jpg); background-size: cover; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid orange;}.hero-section::before{ border : 2px solid red; content: "something"; background-color: black; height: 100vh; flex-shrink: 0;}h1,p{ color: white; opacity: 1;}</style></head><body><header><nav class="navbar"><img src="assets/svgs/logo.svg" alt="" /></nav></header><main><section class="hero-section"><h1> Unlimited movies,<br /> TV shows and more</h1><p>Starts at ₹149.Cancel at any time.</p><p> Ready to watch? Enter your email to create or restart your membership.</p><button class="email-submit-button">Get Started</button></section></main></body></html>