CSS Bootstrap Dropdown location appearing in wrong place - html

Question

I have a horizontal navigation bar with a four buttons. The third button is a dropdown, however the dropdown is appearing too the far left of the nav-bar, and it should be directly beneath the 'Services' button.
HTML:
<div class="nav dropdown">
<button type="button" class="btn btn-primary col-md-3"> Home </button>
<button type="button" class="btn btn-primary col-md-3"> About Us </button>
<button class="btn btn-primary dropdown-toggle col-md-3" type="button" data-toggle="dropdown">Services <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Residential</li>
<li>Commercial</li>
</ul>
<button type="button" class="btn btn-primary col-md-3">Contact Us</button>
</div>
CSS:
.nav {
background-color: #171818;
border-top: 1px solid;
border-bottom: 1px solid;
border-color: #E3E3E3;
height: 60px;
padding-top: 10px;
text-align: center;
}
.nav a:link{
color: #000000;
}
.nav a:visited {
color: #000000;
}
Here is the code to mess around with:
http://www.bootply.com/iSLasxAcEI
So far I have tried to separate the third button into a another individual <div> but it left a gap between the that button and the others, and I have tried to make other alterations to the Bootstrap dropdown classes.
I have been trying to have it drop directly beneath the 'Services' button but have had no avail. Any help would be greatly appreciated!
I am fairly new to using CSS and Bootstrap but if their is anything that I can do to help make the question more clear, please let me know!

Answer 1

I answered this already. Did you delete the previous question?
<div class="nav dropdown">
<button type="button" class="btn btn-primary col-md-3"> Home </button>
<button type="button" class="btn btn-primary col-md-3"> About Us </button>
<div class="btn-group col-md-3" role="group" style="margin: 0px; padding: 0px">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
style="width: 100%">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div>
<button type="button" class="btn btn-primary col-md-3"> Contact Us </button>
</div>
all you had to do was remove the padding and margin from the btn-group class.

Answer 2

Try below code:
Add below style code to "dropdown-menu" class
position: relative !important;
margin: 47px -264px 0 !important;
"dropdown-menu" class is not mentioned in editor from your link. It is added in a bootstrap file that is not displayed in editor. So apply above code with "!important" inline to "dropdown-menu" class or add it to your custom css file.