Hello! I am relatively new to front-end development and I am currently working on converting a PSD design to code for a project. I am struggling a bit to understand certain concepts but I am eager to learn and improve. I am using Bootstrap 4 for this project. I have noticed that there is a white space between the banner and the navigation bar, and some green elements below the banner. I am aware that there are mistakes in my code and I have referred to a sample theme for help. Could you please assist me with this project?
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo.png" style="max-width: 170px; margin-top: -7px;"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#feature">Features</a></li>
<li><a href="#organisations">Organisations</a></li>
<li><a href="#courses">Courses</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#" data-target="#login" data-toggle="modal">Sign in</a></li>
<li class="btn-trial"><a href="#footer">Free Trial</a></li>
</ul>
</div>
</div>
<div class="banner">
<div class="bg-color">
<div class="container">
<div class="row">
<div class="banner-text text-center">
<div class="text-border">
<h1 class="text-dec">Let's Build Something Incredible</h1>
</div>
<div class="intro-para text-center quote">
<h2 class="big-text">Together We Can Achieve More</h2>
<div>
<form class="mc-trial row">
<div class="form-group col-md-3 col-md-offset-2 col-sm-4">
<div class="controls">
<input name="name" placeholder="Enter Your Name" class="form-control" type="text">
</div>
</div>
<!-- End email input -->
<div class="form-group col-md-3 col-sm-4">
<div class="controls">
<input name="EMAIL" placeholder="Phone Number" class="form-control" type="number">
</div>
</div>
<!-- End email input -->
<div class="col-md-2 col-sm-4">
<p>
<button name="submit" type="submit" class="btn btn-block btn-submit">
Submit <i class="fa fa-arrow-right"></i></button>
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<a href="#feature" class="mouse-hover">
<div class="mouse"></div>
</a>
</div>
</div>
</div>
</div>