bootstrap padding around jumbotrons and navbar? - html

Question

I am trying to learn the basics of bootstrap for responsive websites. When I put elements into the "row" class then there is not any margins or padding to the elements and no free space, but with elements such as jumbotron and the navbar then there seems to be padding i cant get rid of on the left and right side.
Any help would be appreciated.
<nav class="navbar navbar-expand-lg navbar-expand-md">
<a class="navbar-brand" href="#">lorem ipsum</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid" style="background-image:url(images/hero-image.jpg)">
<div class="container-fluid">
<h1 class="display-4">lorem ipsum</h1>
<p class="lead">lorem ipsum</p>
</div>
</div>
<div class="row newsletter">
<p class="col-lg-6 col-md-6 col-sm-6 col-xs-12">subscribe to our newsletter</p>
<form class="col-lg-6 col-md-6 col-sm-6 col-xs-12 newsForm">
<input type="email" placeholder="enter your email..." class="box">
<button type="submit" class="button">></button>
</form>
</div>

Answer 1

Boostrap by default apply padding on the navbar you can remove right and left padding by simply doing that:
.navbar.custom-navbar {
padding-left: 0rem !important;
padding-right: 0rem !important;
}
apply custom-navbar class on <nav> element.
To remove jumbotron left and right padding remove <div class="container-fluid"> which is inside jumbotron like that:
<div class="jumbotron jumbotron-fluid" style="background-image:url(images/hero-image.jpg)">
<h1 class="display-4">odtom.com</h1>
<p class="lead">a site showcasing everything odt.</p>
</div>
Also to remove horizontal scroll from the page place the row inside conatiner-fluid.
<div class="container-fluid">
<div class="row newsletter">
<p class="col-lg-6 col-md-6 col-sm-6 col-xs-12">subscribe to our newsletter</p>
<form class="col-lg-6 col-md-6 col-sm-6 col-xs-12 newsForm">
<input type="email" placeholder="enter your email..." class="box">
<button type="submit" class="button">></button>
</form>
</div>
</div>

Answer 2

I'm not sure if this will answer your question, but the left and right paddings in the jumbotron element are coming from the ".container-fluid" class. It seems that you are targeting the container with the ".jumbotron-fluid" class, which is the one currently set to padding-left and right to 0px.
Just target this class to remove or amend the paddings if that's what you need.
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}