Navbar dropdown link left aligned in mobile app version - html

Question

My navbar link "Services" is left aligned as compared to the other links. I want to align it with the rest.
I have tried Bootstrap NavBar not aligned, especially in mobile view but it doesn't help me in my scenario.
Please advise where am i going wrong.
Navbar
CSS:
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 10px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
padding: 13px 0px 10px 0px;
display; inline;
display: inline-block;
}
.dropdown:hover{
background-color:#37979f;
border:1px solid;
border-color: #fff;
border-radius:4px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
margin-top: 10px;
display: none;
position: absolute;
background-color: #37979f;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
color: #ffffff;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #37979f;
border:1px solid;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
HTML:
<div id="navbar" class="navbar-collapse collapse">
<ul class="navbar-right nav navbar-nav" style="background-color:#6FC2E3";>
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="active" >
<a class="page-scroll" href=".">Home</a>
</li>
<li>
<a class="page-scroll" href="./solutions">Solutions</a>
</li>
<li>
<div class="dropdown">
<a class="page-scroll" href="../services">Services</a>
<div class="dropdown-content">
<a class="page-scroll" href="../services/consulting.html">Consulting</a>
<a class="page-scroll" href="../services/development.html">Development</a>
<a class="page-scroll" href="../services/support.html">Support</a>
<a class="page-scroll" href="../services/managed-services.html">Managed Services</a>
</div>
</div>
</li>
<li>
<a class="page-scroll" href="./products">Products</a>
</li>
<li>
<a class="page-scroll" href="./blog">Blog</a>
</li>
<li>
<a class="page-scroll" href="./aboutus">About Us</a>
</li>
<li>
<a class="page-scroll" href="./contactus">Contact Us</a>
</li>
<li style="padding-top:13px;">
<font color="#DF0000 !important;" font size="4px;">Call: [phone]</font>
</li>
</ul>
</div>

Answer 1

why are you create new .dropdown class? already bootstrap have dropdown toogle refer this example it's working very well
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<div class="navbar navbar-inverse ">
<div class="container">
<!-- Header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootstrap</a>
</div>
<!-- Navbar Links -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Services
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
</ul>
</div>
</div>
</div>