I've made my navbar responsive for smaller devices by setting flex-direction: column, which works well for vertical display. However, when I add background-color: rgba(0, 0, 0, 0.8); to my .right-navbar ul within the media query, the background doesn't cover the full area. I'm seeing transparent overflow on the sides and bottom. I suspect the isn't fully expanding, or there might be unaddressed default padding/margin causing these gaps. I'm not sure how to fix this; here are my HTML and CSS for review:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Yannick The Engineer</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" /><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet"><link rel="stylesheet" href="css/styles.css"></head><!-- start --><body> <div class="top-section"><header class="header"><nav class="navbar"><div class="right-navbar"><ul><li><a href="#about-me">About</a></li><li><a href="#skills">Skills</a></li><li><a href="#projects">Project</a></li><li><a href ="#contact" class="btn">Contact</a></li></ul></div><div class="logo"><img src="" alt=""></div></nav><section class="description"><div class="name"><ul><li><a href=""></a></li><li><a href=""></a></li></ul></div><div class="quote"><p>I don't develop, I engineer Solutions.</p></div></section></header> </div><!-- bottom section after the picture --><div class="bottom-section"><div class="about" id="about-me"><h3>About Me</h3><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In sint facilis perferendis. Ut, consectetur placeat totam laudantium blanditiis recusandae ratione animi eos corrupti quisquam, eum, commodi iusto! Accusamus deserunt animi iste autem, enim eveniet delectus tenetur quam iusto reprehenderit, quidem, veniam vel repellat sequi labore. Temporibus hic vitae consectetur quaerat.g. </p></div><!-- Horizontal sections --><section class="hori-box skill" id="skills"><button type="button" class="collapse">skills glimpse</button><div class="content"><div class="box database"><h4>Programming</h4><ul><li><p>Python</p></li><li><p>Javascript</p></li><li><p>C#</p></li><li><p>HTML & CSS</p></li><li><p>Linux/Unix</p></li></ul></div><div class="box programming"><h4>Databases DBMS</h4><ul><li><p>T-SQL/PL-SQL</p></li><li><p>Mongo DB</p></li><li><p>MariaDB</p></li><li><p>Hbase</p></li><li><p>BigQuery</p></li></ul></div><div class="box machine-learning"><h4>Machine-Learning</h4><ul><li><p>Regressions</p></li><li><p>Random Forests</p></li><li><p>Apriori</p></li><li><p>K-Nearest neighbours</p></li><li><p>Backpropafation</p></li><li><p>RNN</p></li><li><p>LSTM</p></li><li><p>Statistics Inference</p></li><li><p></p></li></ul></div><div class="box methodology"><h4>Methodology</h4><ul><li><p>Agile</p></li><li><p>DevOps(CI/CD)</p></li></ul></div><div class="box others"><h4>Others</h4><ul><li><p>Tableau</p></li><li><p>Power BI</p></li><li><p>Databricks</p></li><li><p>Flask</p></li><li><p>.Net</p></li><li><p>Visual studio</p></li><li><p>Gitlab</p></li><li><p>Ansible</p></li><li><p>Docker</p></li><li><p>Kubernetes</p></li><li><p>Jenkins</p></li><li><p>React/EprssJS</p></li></ul></div></div></section><section class="hori-box project" id="projects"><button type="button" class="collapse">Projects</button><div class="content"><ul><li><a href="">Web</a></li><li><a href="">Data Science</a></li><li><a href="">Data Engineering</a></li><li><a href="">DevOps</a></li></ul></div></section><section class="hori-box contacts" id="contact"><button type="button" class="collapse">Get in touch</button><div class="content"><form ><div class="form-group"><label for="first-name" class="visually-hidden">First Name</label><input type="text" id="first-name" name="first-name" placeholder="First Name"></div><div class="form-group"><label for="last-name" class="visually-hidden">Last Name</label><input type="text" id="last-name" name="last-name" placeholder="Last Name"></div><div class="form-group"><label for="Email" class="visually-hidden">Email Address</label><input type="email" id="Email" name="Email" placeholder="Email Address"></div><div class="form-group"><label for="message" class="visually-hidden">Message</label><textarea id="message" name="message" placeholder="Message"> </textarea></div><div class="form-group"><button type="submit" class="btn">Send Message</button></div></form></div></section></div><footer></footer><script> document.addEventListener("DOMContentLoaded", function () { var coll = document.getElementsByClassName("collapse"); for (var i = 0; i < coll.length; i++) { var content = coll[i].nextElementSibling; content.style.display = "none"; // Ensures it's hidden on load coll[i].addEventListener("click", function () { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); } });</script>And here is my CSS:
*{ padding: 0; margin: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { overflow-x: hidden; } /* Top section here */ .top-section{ color: white; } .header{background-image: url("../images/my_pc1.jpg");background-size: cover;background-position: center;height: 100vh;position: relative;}.header::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.2); /* adjust opacity here */ z-index: 1; }.header * { position: relative; z-index: 2; /* Ensures content appears above the overlay */} .bottom-section{ background-color: black; color: white; padding: 50px; }.right-navbar ul{ display: flex; justify-content: center; text-align: center; gap: 20px; font-size: 20px; padding: 0; margin: 0;}.navbar {background-color: rgba(19,22,26, 0.5);padding: 10px;position: relative;width: 100%;}.navbar li{padding: 10px;}.navbar li:hover{background-color:rgba(19,22,26, 0.7) ;}.description{padding: 0 30px;display: flex;justify-content: space-between;text-align: center;}.description .quote p{color: white;padding-top: 150px;padding-right: 20px;font-family: "Alfa Slab One";text-transform: uppercase;font-size: 20px;overflow: hidden;white-space: nowrap;animation: typing 2.5s steps(38)forwards;}.description .quote p::after{content: "";position: absolute;display: block;height: 100%;width: 1px;background: #dadada;right: 0;top: 0;animation: cursorr 1s steps(1, end) 2.5s 1 forwards;;}@keyframes typing{ from{ width: 0; } to{ width: 100%; } } @keyframes cursorr{ 0%{ opacity: 1; } 50%{ opacity: 0; } 100%{ opacity: 0; } } /* Bootom section */ .about{ padding: 30px 20px; }.about p{line-height: 1.5rem;text-align: justify;font-size: 20px;}.content{display: flex;justify-content: space-between;text-align: center;flex-wrap: wrap;gap: 20px;overflow: hidden;transition: max-height 0.3s ease-out;line-height: 2.5rem;}.content h4{text-transform: uppercase;}.collapse {background-color: #000;color: white;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 50px;text-transform: uppercase; } .collapse:after { content: '\002B'; font-size: 13px; color: white; float: right; margin-left: 5px; font-size: 25px; } .active:after { content: "\2212"; } .active, .collapse:hover { background-color: #555; } a, li{ list-style: none; text-decoration: none; color: white;}/* Form */ .form-group{ margin: 2rem 0; } .contacts input, .content textarea{ border: none; border-bottom: 1px white solid; width: 90%; padding-bottom: 1rem; background-color: black; } .contacts input::placeholder, .contact textarea::placeholder { color: white; opacity: 1;}.contacts input:focus,.contact textarea:focus {outline: none; /* Removes blue border */border-bottom: 1px solid white; /* Keeps your white bottom border */color: white; /* Makes typed text white */}.form-group .btn{display: inline-block;padding: 1rem 2rem;border: 1px solid;width: 50%;border-radius: 10px;font-size: 20px;cursor: pointer;transition: all 0.7s ease-in-out;}.form-group .btn:hover{background-color: #0056b3;width: 90%;}.visually-hidden{clip: rect(0 0 0 0);clip-path: inset(50%);height: 1px;overflow: hidden;position: absolute;white-space: nowrap;width: 1px; } /* Media queries */ @media(max-width:768px){ .right-navbar ul{ flex-direction: column; align-items: center; /*background-color: rgba(0, 0, 0, 0.8) ; */ gap: 15px; } .right-navbar ul li { margin: 5px 0; padding: 5px 0; font-size: 16px; } .navbar { flex-direction: column; align-items: center; width: 100%; } .navbar li:hover{ background-color: #555; width: 100%; } .description .quote p { padding-top: 50px; font-size: 15px; text-align: center; }.collapse {font-size: 30px;}.form-group .btn {width: 100%;}.about p{line-height: 1.2rem;text-align: justify;font-size: 15px;word-spacing: 1px;}}