My portfolio website features a handful of navigation items for various views. I simply copied the default navigation code from the Bootstrap site. However, when I expand the "hamburger" menu, the navigation remains the same size, causing the expanded items to overlap with the border of my navigation bar. Here's an illustration:
https://i.sstatic.net/aFXCv.png
I've searched the Bootstrap site for solutions to this issue, but haven't found anything relevant. Could it be related to the presence of the border in my navigation bar? Below is the code snippet for my navigation bar:
.navbar{
height: 10.0rem;
border-bottom: 1px solid rgb(168, 168, 168);
}
.bg-light {
background-color: white !important;
}
.navbar-collapse{
padding-left: 0;
}
#options{
list-style-position: inside;
padding-left: 12rem;
}
#options li{
padding-left: 1rem;
padding-right: 1rem;
font-size: 1.2rem;
font-family: Raleway;
}
li a:hover{
border-bottom: 0.001rem solid black;
}
.navbar-brand{
font-size: 4rem;
padding-left: 3rem;
font-family: Raleway;
font-weight: 400;
}
#header-container {
display: flex;
flex-direction: row-reverse;
justify-content: right;
width: 50%;
height: 50%;
margin: 0 0 0 10%;
padding-left: 30%;
}
html{
height: fit-content;
}
body {
padding-top: 5.0rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alan Alban - Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Alan Alban</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<section id="header-container">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav" id="options">
<li class="nav-item active">
<a class="nav-link" href="/">Experience <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/skills">Skills</a>
</li>
</ul>
</div>
</section>
</nav>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>Your assistance is greatly appreciated.