I've been working on my HTML and trying to position my dropdown menu to the left of the screen. I've used inline styling with absolute positioning and left:0, but for some reason, it's not working. Can someone please help me figure this out so I can continue learning? I've utilized Bootstrap to create this navigation bar and attempted to use absolute positioning, but it doesn't seem to be functioning correctly. I'm unsure why this is happening.
<!Doctype html>
<html>
<meta charset="utf-8">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>
Tours and Travels
</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
//navigation bar
<body>
<header class ="navbar-inverse navbar-fixed-top" >
<div class="container-fluid">
<nav role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" >
<li class="active"><a href="./index.html">Home<span class="sr-only">(current)</span></a></li>
<li><a href="#">About Us</a></li>
<li class="dropdown" >
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Packages <span class="caret"></span></a>
<ul class="dropdown-menu" style="positon:absolute; left:0;">
//this is dropdown i want to move to the left of the screen
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" style="padding:0.5%;" >
<li><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
Launch</button></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</header>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>