dropdown bug

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<title>my site</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

	<link rel="stylesheet" href="css/stylesheet.css">
</head>

<body>
	<div class="container" id="main-container">
		<div class="header row">
			<h1 class="col-md-4">
				<a href="#" title="Home page">
					<img src="images/logo.png" />
				</a>
			</h1>
			<div class="col-md-8">
				<nav class="navbar navbar-expand-sm">
					<ul class="navbar-nav">
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Link 1</a>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Link 1a</a>
								<a class="dropdown-item" href="#">Link 1b</a>
								<a class="dropdown-item" href="#">Link 1c</a>
							</div>
						</li>
						<li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
						<li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
						<li class="nav-item"><a class="nav-link" href="#">Link 4</a></li>
					</ul>
				</nav>
			</div>
		</div>
	</div>
</body>

</html>

CSS

body {
  background-color: #ddd;
}
body #main-container {
  background-color: #fff;
  margin-top: 10px;
  border-radius: 20px 20px 0 0;
}

.header {
  position: relative;
  margin: 0 10px 20px 10px;
  border-bottom: 3px solid #444;
}
.header h1 {
  margin: 0;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0;
  background-color: #fff;
}

.navbar-expand-sm .navbar-nav .nav-link {
  color: #444;
  text-align: centre;
  text-decoration: none;
  font-size: 17px;
  padding: 13px 16px 9px 16px;
  border-radius: 16px 16px 0 0;
}
.navbar-expand-sm .navbar-nav .nav-link:hover {
  background-color: #444;
  color: #e5e5e5;
}