Question posted in 
I am working on a personal project that I am having a blast with when I noticed that my bootstrap 4 navbar and my banner have slightly different lengths, and that there is a slight horizontal scroll. I am not sure of the reason why, because my banner has hidden overflow, and I should have used % for any width related properties. I don’t think there is anything that exceeds the width of the page either. At first I thought it was because of how I put the left padding of my top_header class to 20px, but when I attempted to change it to a % value, it did not work. Then I tried deleting it, and the problem persisted. Could someone please help me solve the problem?
Here is my HTML/CSS:
@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 active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li> -->
<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>
<!--<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>-->
</ul>
<!--<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>-->
</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>Here is the visual problem that I am noticing, at the very right (the black is not a part of the website). (https://i.stack.imgur.com/CxaGF.jpg)
Thank you so much, I would really appreciate any input. Additionally, if anyone notices bad habits in my code, please tell me too.
2
Answers
See, I think this is due to the default margin of the HTML page.
In your CSS file, try this. It might help
in your CSS use this (i removed
"from the code)Share me your response after trying this.
Add class ‘no-gutters’ to the row div.