No matter how I tried to modify my CSS I am not able to a row displaying 5 categories in .content despite having the display: flex property.
Why can't I display my .content-2 in the middle? Just like the flex property is ordering it? I am able to get something decent especially in .hori-box-skill when I remove the my javascript remove the collapsible effect.
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"; } }); }});* { 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: 10px; padding: 5px; } .right-navbar ul li { margin: 5px 0; padding: 5px 0; font-size: 18px; } .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; }}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512Evv84Mr4kqVGRNSgIGL/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"><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></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>I am Yannick, A highly motivated and inquisitive problem-solver. I leverage the power of Information Technology to architect, sustain, and optimise innovative solutions. My core competencies encompass the full lifecycle of applications development and maintenance, complemented by a robust understanding of data-centric disciplines including Data-Science, Analysis, and Engineering. </p></div><!-- Horizontal sections --><section class="hori-box skill" id="skills"><button type="button" class="collapse">skills glimpse</button><div class="content-1"><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</p></li></ul></div><div class="box others"><h4>Others</h4><ul><li><p>Tableau/Power BI</p></li><li><p>Databricks</p></li><li><p>Flask/.Net</p></li><li><p>Gitlab</p></li><li><p>Ansible/Jenkins</p></li><li><p>Docker</p></li><li><p>Kubernetes</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-2"><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-3"><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>