I have created a website using Bootstrap 3. When in responsive mode, my index.html page has a horizontal scroll bar. I could not find what is causing this overflow-x. This only happens in my index.html page.
In the other pages, this overflow is not present. At first I thought it was something in the Contact section of my index.html which has a box shadow which caused the overflow in x. Even after removing it, the overflow was present which made me conclude that the navbar is the one causing the issue.
I am not able to find what is causing this issue.
Screenshot: (the overflow on the right side)
HTML code for navbar:
<header id="main"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false"> <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=""> <!-- <img class="img img-responsive" src="www/images/srs-logo.jpg" alt="SRS Constructions"> --> SRS Constructions </a> </div> <div class="collapse navbar-collapse navbar-right" id="collapse"> <ul class="nav navbar-nav"> <li class="active"><a class="main" href="#main">Home <span class="sr-only">(current)</span></a> </li> <li class="dropdown" id="nav-about"> <a href="#about" class="dropdown-toggle main" role="button" aria-haspopup="true" aria-expanded="false">About </a> <ul class="dropdown-menu" style="left:0;right: auto"> <li><a href="about.html">The Founder</a></li> <li role="separator" class="divider"></li> <li><a href="health-policy.html">HSE Policy</a></li> <li><a href="quality-policy.html">Quality Policy</a></li> </ul> </li> <li><a class="main" href="#services">Services</a></li> <li><a class="main" href="#projects">Our Projects</a></li> <li><a class="main" href="#whyus">Why Us</a></li> <li><a class="main" href="#contact">Contact</a></li> </ul> </div> </div> </nav> </header> I have not added any specific css which alters the width of the navbar.
CSS for navbar:
/*Navbar styles*/ .navbar { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3); } .navbar-default .navbar-nav { font-size: 15px; } .navbar-fixed-top { min-height: 80px; } .navbar-nav > li > a { padding-top: 0px; padding-bottom: 0px; line-height: 80px; } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { color: #ffffff; text-decoration: none; outline: 0; background-color: #b4a28f; } @media (max-width: 767px) { .navbar-nav > li > a { line-height: 30px; padding-top: 10px; padding-bottom: 10px; } .navbar-brand > img { width: 40%; position: relative; display: inline-block; height: auto; margin-left: 90px; margin-top: -80px; } #footer { color: #2e2e2e; } } @media (min-width: 767px) { #footer { color: #ffffff; } } .navbar-brand > img { width: 30%; position: relative; display: inline-block; height: auto; margin-left: 50px; margin-top: -15px; } The site is also available here
Please help me with fixing this issue.
