Hi,

I created an example page where you can see my solution. Try this code and check if it is right for you:

<!-- Main navigation -->
<header>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body smooth-scroll">
<a id="closemodal" href="#contact" type="button" class="btn btn-primary">Primary</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark primary-color">

<!-- Navbar brand -->
<a class="navbar-brand" href="#">Navbar</a>

<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="basicExampleNav">

<!-- Links -->
<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="#" data-toggle="modal" data-target="#exampleModal">Modal</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>

<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>

</ul>
<!-- Links -->

<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</div>
</form>
</div>
<!-- Collapsible content -->

</nav>
<!--/.Navbar-->

</header>
<!-- Main navigation -->

<!-- Main layout -->
<main>

<div class="container">

<!-- Section: Blog v.1 -->
<section class="my-5">

<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center my-5">Recent posts</h2>
<!-- Section description -->
<p class="text-center w-responsive mx-auto mb-5">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<!-- Grid row -->
<div class="row">

<!-- Grid column -->
<div class="col-lg-5">

<!-- Featured image -->
<div class="view overlay rounded z-depth-2 mb-lg-0 mb-4">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/img%20(27).jpg" alt="Sample image">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>

</div>
<!-- Grid column -->

<!-- Grid column -->
<div class="col-lg-7">

<!-- Category -->
<a href="#!" class="green-text"><h6 class="font-weight-bold mb-3"><i class="fa fa-cutlery pr-2"></i>Food</h6></a>
<!-- Post title -->
<h3 class="font-weight-bold mb-3"><strong>Title of the news</strong></h3>
<!-- Excerpt -->
<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus et aut officiis debitis.</p>
<!-- Post data -->
<p>by <a><strong>Carine Fox</strong></a>, 19/08/2018</p>
<!-- Read more button -->
<a class="btn btn-success btn-md">Read more</a>

</div>
<!-- Grid column -->

</div>
<!-- Grid row -->

<hr class="my-5">

<!-- Grid row -->
<div class="row">

<!-- Grid column -->
<div class="col-lg-7">

<!-- Category -->
<a href="#!" class="pink-text"><h6 class="font-weight-bold mb-3"><i class="fa fa-image pr-2"></i>Lifestyle</h6></a>
<!-- Post title -->
<h3 class="font-weight-bold mb-3"><strong>Title of the news</strong></h3>
<!-- Excerpt -->
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
<!-- Post data -->
<p>by <a><strong>Carine Fox</strong></a>, 14/08/2018</p>
<!-- Read more button -->
<a class="btn btn-pink btn-md mb-lg-0 mb-4">Read more</a>

</div>
<!-- Grid column -->

<!-- Grid column -->
<div class="col-lg-5">

<!-- Featured image -->
<div class="view overlay rounded z-depth-2">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/img%20(34).jpg" alt="Sample image">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>

</div>
<!-- Grid column -->

</div>
<!-- Grid row -->

<hr class="my-5">

<!-- Grid row -->
<div class="row">

<!-- Grid column -->
<div class="col-lg-5">

<!-- Featured image -->
<div class="view overlay rounded z-depth-2 mb-lg-0 mb-4">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/img (28).jpg" alt="Sample image">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>

</div>
<!-- Grid column -->

<!-- Grid column -->
<div class="col-lg-7">

<!-- Category -->
<a href="#!" class="indigo-text"><h6 class="font-weight-bold mb-3"><i class="fa fa-suitcase pr-2"></i>Travels</h6></a>
<!-- Post title -->
<h3 class="font-weight-bold mb-3"><strong>Title of the news</strong></h3>
<!-- Excerpt -->
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro qui dolorem ipsum quia sit amet.</p>
<!-- Post data -->
<p>by <a><strong>Carine Fox</strong></a>, 11/08/2018</p>
<!-- Read more button -->
<a class="btn btn-indigo btn-md">Read more</a>

</div>
<!-- Grid column -->

</div>
<!-- Grid row -->

</section>
<!-- Section: Blog v.1 -->

<hr>

<!-- Section: Contact v.1 -->
<section id="contact" class="my-5">

<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center my-5">Contact us</h2>
<!-- Section description -->
<p class="text-center w-responsive mx-auto pb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.</p>

<!-- Grid row -->
<div class="row">

<!-- Grid column -->
<div class="col-lg-5 mb-lg-0 mb-4">

<!-- Form with header -->
<div class="card">
<div class="card-body">
<!-- Header -->
<div class="form-header blue accent-1">
<h3 class="mt-2"><i class="fa fa-envelope"></i> Write to us:</h3>
</div>
<p class="dark-grey-text">We'll write rarely, but only the best content.</p>
<!-- Body -->
<div class="md-form">
<i class="fa fa-user prefix grey-text"></i>
<input type="text" id="form-name" class="form-control">
<label for="form-name">Your name</label>
</div>
<div class="md-form">
<i class="fa fa-envelope prefix grey-text"></i>
<input type="text" id="form-email" class="form-control">
<label for="form-email">Your email</label>
</div>
<div class="md-form">
<i class="fa fa-tag prefix grey-text"></i>
<input type="text" id="form-Subject" class="form-control">
<label for="form-Subject">Subject</label>
</div>
<div class="md-form">
<i class="fa fa-pencil prefix grey-text"></i>
<textarea type="text" id="form-text" class="form-control md-textarea" rows="3"></textarea>
<label for="form-text">Icon Prefix</label>
</div>
<div class="text-center">
<button class="btn btn-light-blue">Submit</button>
</div>
</div>
</div>
<!-- Form with header -->

</div>
<!-- Grid column -->

<!-- Grid column -->
<div class="col-lg-7">

<!-- Google map-->
<div id="map-container" class="rounded z-depth-1-half map-container" style="height: 400px"></div>
<br>
<!-- Buttons-->
<div class="row text-center">
<div class="col-md-4">
<a class="btn-floating blue accent-1">
<i class="fa fa-map-marker"></i>
</a>
<p>New York, 94126</p>
<p class="mb-md-0">United States</p>
</div>
<div class="col-md-4">
<a class="btn-floating blue accent-1">
<i class="fa fa-phone"></i>
</a>
<p>+ 01 234 567 89</p>
<p class="mb-md-0">Mon - Fri, 8:00-22:00</p>
</div>
<div class="col-md-4">
<a class="btn-floating blue accent-1">
<i class="fa fa-envelope"></i>
</a>
<p>info@gmail.com</p>
<p class="mb-0">sale@gmail.com</p>
</div>
</div>

</div>
<!-- Grid column -->

</div>
<!-- Grid row -->

</section>
<!-- Section: Contact v.1 -->

</div>

</main>
<!-- Main layout -->

<!--Footer-->
<footer class="page-footer font-small blue pt-4 mt-4">

<!--Footer Links-->
<div class="container-fluid text-center text-md-left">
<div class="row">

<!--First column-->
<div class="col-md-6">
<h5 class="text-uppercase">Footer Content</h5>
<p>Here you can use rows and columns here to organize your footer content.</p>
</div>
<!--/.First column-->

<!--Second column-->
<div class="col-md-6">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!--/.Second column-->
</div>
</div>
<!--/.Footer Links-->

<!--Copyright-->
<div class="footer-copyright py-3 text-center">
© 2018 Copyright:
<a href="#"> MDBootstrap.com </a>
</div>
<!--/.Copyright-->

</footer>
<!--/.Footer-->

<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<script type="text/javascript">

$('#closemodal').click(function() {
$('#exampleModal').modal('hide');
})

</script>

Best,

Marta