I am new to using Bootstrap. I have encountered an issue with the navbar on my website. The navbar appears to be longer than the screen size and the right button is being overlapped by the right side of the window. Unfortunately, I am unable to scroll the webpage to the right in order to see the entire navbar. This problem only recently appeared, as it used to display correctly. Here is how it currently looks:
https://i.sstatic.net/gj4ac.png
.navbar {
padding-top: 6px;
padding-bottom: 4px;
box-shadow: 0px 1px 5px gray;
background-color: rgba(244, 139, 139, 0.8);
}
.nav.navbar-nav.navbar-right a {
margin-right: 2px;
color: white;
font-size: 30px;
font-family: Phenomena-Bold;
}
.navbar-collapse .navbar-nav > li > a:hover {
color: #3b3c3d;
}
.navbar-collapse .navbar-nav > li > a:active {
color: #3b3c3d;
}
span.glyphicon-user {
font-size: 20px;
}
span.glyphicon-shopping-cart {
font-size: 20px;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
background-color: white
/* change this to any color you want! */
;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class="navbar navbar-light container-fluid navbar-fixed-top" role="navigation">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-pills navbar-right">
<li role="presentation"><a class="page-scroll" href="#">1</a>
</li>
<li role="presentation"><a class="page-scroll" href="#">2</a>
</li>
<li role="presentation"><a class="page-scroll" href="#">3</a>
</li>
<li role="presentation"><a class="page-scroll" href="#">4</a>
</li>
<li role="presentation"><a class="page-scroll" href="#"><span class="glyphicon glyphicon-user"></span></a>
</li>
<li role="presentation"><a class="page-scroll" href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>