I am currently trying to fill the white space between the header and the navigation. I'm new to HTML and CSS, so please excuse my lack of knowledge.
I tried adding a CSS rule to reset the margin of the element inside the <header>.
header {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
header h4 {
margin: 0;
}
nav {
display: flex;
justify-content: center;
background-color: #444;
overflow-x: auto;
}
nav a {
padding: 10px 20px;
color: white;
text-decoration: none;
}
nav a:hover {
background-color: #555;
}
.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
}
.containers {
display: flex;
justify-content: space-between;
align-items: center;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}<body>
<div class="containers">
<header>
<h4>Infrastructural Company</h4>
</header>
<nav>
<a href="#home" onclick="showTab('home')">Home</a>
<a href="#services" onclick="showTab('services')">Services</a>
<a href="#projects" onclick="showTab('projects')">Projects</a>
<a href="#contact" onclick="showTab('contact')">Contact</a>
</nav>
</div>
</body>
Read more about flex;
I've added
flex-direction: column;to stack the header and navigation vertically.justify-content: flex-start;aligns the items to the top, ensuring there is no extra space between the header and navigation.Feel free to adjust the background color and other styles to match your design preferences.