Hello guys, I am trying to make a job forum site with five pages and I am already struggling on separating the h1 and h3 as they overlap on my container. Can anyone help? I’ll provide my HTML and CSS. I desperately need assistance and someone to explain what the problem I have faced is.
Hire applicants or find employees at HirePath│HirePath<div id="header">
<div class="container">
<nav class="navbar">
<img src="logooooo.PNG" class="logo" alt="Logo">
<ul class="navlinks">
<li><a href="#">Find Jobs</a></li>
<li><a href="#">Learn How To Build A CV</a></li>
<li><a href="#">Job Application Guidance</a></li>
<li><a href="#">Join Community</a></li>
</ul>
<section class="home">
<div class="home-content">
<h1>Choose your dream job.</h1>
<h3>header 3</h3>
</div>
</section>
<ul class="register">
<li><a href="#">Sign In</a></li>
<li><a href="#">Register</a></li>
</ul>
</nav>
</div>
</div>
- {
margin: 0;
padding: 0;
font-family: ‘Poppins’, sans-serif;
box-sizing: border-box;
}
body {
background: #080808;
background-color: rgb(21, 25, 49);
color: rgb(255, 255, 255);
}
#header {
width: 100%;
/* Removed height: 100vh so that the header doesn’t take up the whole viewport */
}
.container {
background: rgba(0, 0, 0, 0.451);
width: 100%;
height: 140px;
display: flex;
align-items: center; /* Vertically center items inside the container /
justify-content: space-between; / Space out the logo and nav links /
padding: 0 20px; / Add some padding to the left and right of the container */
}
.logo {
width: 90px;
height: 80px;
}
.navbar {
display: flex;
align-items: center; /* Vertically center items inside the navbar /
width: 100%; / Ensure the navbar takes full width /
justify-content: space-between; / Spread the items across the container */
}
.navlinks {
display: flex; /* Place nav items in a horizontal line /
list-style: none; / Remove default list styling */
}
.navlinks li {
margin-left: 20px; /* Add space between the navigation items */
}
.navlinks li a {
text-decoration: none;
color: white;
font-size: 16px;
padding: 10px;
transition: all 0.3s ease; /* Add transition for hover effect */
}
.navlinks li a:hover {
background-color: #444; /* Add a background on hover /
border-radius: 5px; / Optional: rounded corners for the hover effect */
}
/* Register list - aligned to the top right /
.register {
display: flex; / Align register items horizontally /
list-style: none;
margin-left: auto; / Push the list to the right side of the navbar */
}
.register li {
margin-left: 20px; /* Space between the items */
}
.register li a {
text-decoration: none;
color: white;
font-size: 16px;
padding: 10px;
transition: all 0.3s ease;
}
.register li a:hover {
background-color: #444; /* Add a background on hover /
border-radius: 5px; / Rounded corners on hover */
}
