Currently, I am in the process of developing a React app that includes a navigation bar. The issue at hand is that the content within my h1 tags and other elements are overlapping with the navigation bar - meaning that they are not properly contained within it.
<nav class="header">
<a href="" class="logo">
INDUSTRIES
</a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn">
<span class="navicon"></span>
</label>
<ul class="menu">
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/blogs">Text</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
The following CSS styling is applied:
* {
margin: 0;
padding: 0;
}
a {
color: #000;
}
/* additional styles for header, menu, and menu icon */
Upon running the code, it becomes apparent that the h1 elements (specifically "bmw 4 series") are not being contained as desired within the program. How can this issue be resolved?