So, I am finishing up my first page of my first bootstrap website. I am having two issues which I havent figured out a resolution.

A.) Inserting a modal window button into the carousel. I have managed to get some functionality when activating the modal, however upon opening, the fade takes over the entire screen and will not allow the text box to function or appear properly.

B.) Navbar randomly stopped aligning properly in the mid-level browser range and does not stay aligned. This was initially functioning properly but is now pushing the container to expand the text into a second row.

Thanks in advance for any tips or corrections to my code you can offer!



<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
<div class="container">

<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Relocation Authority </a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#ourstory">Our Story</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#faq">FAQ's</a></li>
<li><a href="#costcalculator">Cost Calculator</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Moving Guides<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Moving in Miami: Relocation Guide</a></li>
<li><a href="#">Moving in Atlanta: Relocation Guide</a></li>
<li><a href="#">Moving in Texas: Relocation Guide</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Resources</li>
<li><a href="#">Protect Your Move</a></li>
<li><a href="#">DOT Company Snapshot</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

</div>
</div>


<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="images/skyline-buildings-new-york-skyscrapers.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Find movers and compare prices instantly!</h1>
<p>Just like major travel sites, we compare moving rates and services to help you move.</p>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#myModal">Get Moving Quotes</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Compare movers and relocation costs instantly!</h4>
</div>
<div class="modal-body">
<p>Just like major travel sites, we compare moving rates and services to help you move.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>

<script>
$(function () { $('#myModal').modal({
keyboard: true
})});
</script>

</div>
</div>
</div>


<div class="item">
<img class="second-slide" src="images/_qoauzgaopy-denys-nevozhai.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Calculate The Cost of Your Move</h1>
<p>Get Free, No Obligation Moving Quotes Today!</p>
<p><a class="btn btn-lg btn-warning" href="#" role="button">Get Moving Quotes</a></p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="images/colors-1838392_960_720.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>You're on the Move, We're here to Help</h1>
<p>Get a FREE comparitive analysis of each relocation service available in your area.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Get Moving Quotes</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->