I've been working on a personal project that I'm really enjoying, but I noticed that my bootstrap 4 navbar and banner have slightly different lengths, causing a slight horizontal scroll. Despite having hidden overflow in my banner and using percentage values for width properties, the issue persists. Initially, I suspected the left padding of my top_header class to be the culprit, but changing it to a percentage value didn't solve the problem. Even removing it altogether didn't help. Can someone please assist me in resolving this issue?
Check out snippets of my HTML/CSS below:
@font-face {
font-family: Montserrat-Regular;
src: url("Montserrat-Regular.ttf");
}
#my_banner {
background-image: url('banner.jpg');
"
padding-bottom: 100px;
overflow: hidden;
width: 100%;
max-width: 100%;
}
#banner_chibi {
width: 50%;
padding-left: 40px;
}
.navbar {
margin-bottom: 0;
width: 100%;
}
.navbar,
.dropdown-menu {
background: #e5e5e5 !important;
border: 0;
}
.navbar li a {
color: #7e7e7e;
}
#top_header {
font-family: Montserrat-Regular;
color: black;
font-size: 20px;
padding-left: 20px;
padding-right: 30px;
}
#red {
color: #cd2d3a;
}
#blue {
color: #0047a0;
}
#main_content {
margin-top: 4%;
}
.left_card {
width: 20%;
height: 400px;
margin-left: 4%;
position: fixed;
}
.right_card {
width: 90%;
margin-left: 5%;
}
#card_1 {
position: relative;
height: 1000%;
top: 20%;
}
html,
body {
height: 100%;
}
body {
background: #5e5e5e;
overflow-x:
}<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap 101 Template</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Banner -->
<div id="my_banner" class="row">
<div class="col-md-4">
<img id="banner_chibi" src="cute_scholar.png">
</div>
</div>
<!--Navbar -->
<nav class="navbar navbar-expand-lg navbar-default">
<a><span id = "top_header"><span id = "red">Step</span> by <span id = "blue">Step</span> Korean</span></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Browse
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Main Lesson Catalog</a>
<a class="dropdown-item" href="#">Phonetics Study</a>
<a class="dropdown-item" href="#">Vocab</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Test Yourself</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- Main Body Content -->
<div class="row" id="main_content">
<div class="col-md-3">
<div class="card left_card">
<div class="card-body">
Placeholder text.
</div>
</div>
</div>
<div class="col-md-8">
<div class="card right_card">
<div class="card-body">
Placeholder text.
</div>
</div>
<div class="card right_card" id="card_1">
<div class="card-body">
Placeholder text.
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>
</body>If you want to see the visual problem I'm facing (the black area is not part of the website), check it out here: https://i.sstatic.net/CxaGF.jpg. Your help solving this issue would be greatly appreciated. Feel free to point out any bad coding habits as well.