Hey there, I'm looking to adjust the layout of my menu buttons by removing the left and right "margins" (if that's the correct term), so they all fit neatly inside the navigation bar.
https://i.sstatic.net/udes8.png
I want to ensure that all the menu buttons are able to fit properly, allowing for easy additions or edits in the future. I have a basic understanding of HTML/CSS but I'm not sure how to achieve this layout adjustment. I've tried using Chrome dev tools for previewing, but I haven't been successful so far. Any help would be greatly appreciated!
Here's a snippet of my code: HTML file (with js script for dropdown)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="header_test_2.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>CFTC - TEMPLATE HEADER AND FOOTER</title>
</head>
<body>
<header>
<section class="navigation">
<div class="nav-container">
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
...
</ul>
</nav>
</div>
</section>
, </header>
</body>
<script type="text/javascript">
(function($) { // Begin jQuery
$(function() { // DOM ready
...
}); // end DOM ready
})(jQuery); // end jQuery
</script>
</html>
And here is my CSS File
@font-face {
font-family: "oswald";
src: url("fonts\oswald.regular.ttf");
}
.navigation {
height: 70px;
background: #262626;
}
.brand a, .brand a:visited {
color: #fff;
text-decoration: none;
}
...
That's where I need to make changes