CSS Dropdown Menu - not aligning correctly - html

Question

Hey I have a CSS dropdown menu that drops down on hover. Unfortunately its not aligned correctly, directly under "services", but to the right of it.
How would I change it so its aligned correctly? I've been slowly adding and modifying free CSS templates to make a custom website, as I'm no coder and this is all kinda new. I'm a visual learner, so messing around until I can understand it and my way of learning..but for some reason I just can't figure this out, even after reading a bunch and thinking I had it correct.
Any help would be much appreciated!
.navbar-collapse {
text-align: center;
position: relative;
}
.site-header-white .navbar-nav>li>a,
.site-header-white .site-title {
color: #fff;
position: relative;
}
.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover,
.navbar-nav>li>a:hover,
.navbar-nav>li>a:focus,
.navbar-nav>li.active>a,
.navbar-collapse li a:hover,
.dropdown.open>a,
.site-header-white .dropdown.open>a,
.dropdown-menu a:hover,
.dropdown:hover>a,
.dropdown-menu>li>a:focus,
.dropdown-menu li a:hover,
.slicknav_nav>li.active a,
.slicknav_open .slicknav_arrow,
.slicknav_nav>li a:hover {
background-color: transparent;
color: #f13a11;
}
.navbar-toggle {
border-color: #fff;
margin: 0 15px 0 0;
position: relative;
top: -1px;
}
.navbar-toggle:hover,
.navbar-toggle[aria-expanded=true] {
background-color: #fff;
border-color: #000;
cursor: pointer;
}
.navbar-toggle:hover .icon-bar,
.navbar-toggle[aria-expanded=true] .icon-bar {
background-color: #000;
}
.navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-nav .dropdown-menu {
display: inline;
opacity: 0;
visibility: hidden;
border-radius: 0;
min-width: 130px;
border: 0;
border-top: 5px solid #f13a11;
top: 140%;
transition: all 0.4s;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-ms-transition: all 0.4s;
}
.navbar-nav li a:hover+.dropdown-menu,
.navbar-nav .dropdown-menu:hover {
opacity: 1;
visibility: visible;
top: 100%;
transition-delay: 0s;
display: inline-block;
}
.dropdown-menu li a {
padding: 5px 15px;
position: relative;
left: 0;
float: left;
}
.dropdown-menu li a:hover {
left: 15px;
position: relative;
}
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">GG's Aerial Photography</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-lg-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About Us
</li>
<li class="nav-item">Services
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li>Events</li>
<li>Real Estate</li>
<li>Construction</li>
<li>Damage</li>
</ul>
</li>
<li class="nav-item">
Contact
</li>
</ul>
<ul class="social-icon ml-lg-3">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
</nav>

Answer 1

Use dropright class form bootstrap Framework
<li class="nav-item">Services
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li>Events</li>
<li>Real Estate</li>
<li>Construction</li>
<li>Damage</li>
</ul>
</li>

Answer 2

Herewith I have provided a sample reference with your code for dropdown
<style>
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {}
</style>
.
<nav class="navbar navbar-expand-lg fixed-top">
<a class="navbar-brand" href="index.html">GG's Aerial Photography</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-lg-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About Us
</li>
<div class="dropdown">
<a class="dropbtn">Services</a>
<div class="dropdown-content">
Event
Real Estate
Construction
</div>
</div>
<li class="nav-item">
Contact
</li>
</ul>
<ul class="social-icon ml-lg-3">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
</nav>