One issue I'm encountering with my website involves the border at the bottom of my navigation bar. Despite trying to adjust the box-sizing property to border-box, I still can't get it to display correctly. My goal is to have the border span 100% of the browser's width.
The second challenge I'm facing is creating a responsive menu that transforms my list items into a hamburger slider for tablet and mobile users. Currently, the layout feels off because my header image is floated left, and when I add the hamburger menu, it doesn't align below the logo even after using clear both. Additionally, the borders of the list items are not filling the screen width as intended.
I haven't implemented the JavaScript for the menu icon yet as I want to address these issues first before moving forward. Any assistance would be greatly appreciated.
Here is a snippet of the HTML code:
<header>
<a href="index.html"><img src="images/brand.png" alt="George Designs Logo" class="brand"></a>
<img src="images/menu.png" alt="menu" class="menu-trigger">
<nav class="nav-menu">
<ul class="clearfix">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
You can find the CSS code in the attached JSFiddle link.
For the complete project details, please visit: http://jsfiddle.net/ntnzz1fj/2/