unique width on navbar button - html

Question

My navbar has five buttons. But button nr.5, which is a dropdown-menu with a login function, needs a width on 300 px; My CSS is for all my buttons, so how can I make the dropdown login box unique, with a width there is different from the others?
HTML
<li>
About Us
</li>
<li>
Contact
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-close-others="false" data-delay="0" data-hover=
"dropdown" data-toggle="dropdown" href="#">Login <i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<!--container start-->
<div class="login-bg">
<div class="container">
<div class="form-wrapper">
<form class="form-signin wow fadeInUp" action="index.html">
<h2 class="form-signin-heading">sign in now</h2>
<div class="login-wrap">
<input type="text" class="form-control" placeholder="User ID" autofocus>
<input type="password" class="form-control" placeholder="Password">
<label class="checkbox">
</label>
<button class="btn btn-lg btn-login btn-block" type="submit">Sign in</button>
</div>
</form>
</div>
</div>
</div>
<!--container end-->
</li>
</ul>
</li>
CSS:
a { color: #444e67 }
a:hover { color: #48cfad }
p { line-height: 22px }
/*header*/
.head-section { border-bottom: 1px solid #eee }
.head-section .navbar {
margin-bottom: 0;
}
.navbar-default { border: none }
.navbar-brand {
color: #bcc0cd;
font-size: 30px;
font-weight: 100;
line-height: 30px;
margin-top: 30px;
padding: 0;
}
.navbar-brand span { color: #48cfad }
.head-section .navbar-collapse ul.navbar-nav {
float: right;
margin-right: 0;
z-index: 199;
}
.head-section .navbar-default { background-color: #fff }
.head-section .nav li a,
.head-section .nav li.active ul.dropdown-menu li a {
color: #999;
font-size: 14px;
font-weight: 300;
background: none;
***/* I can change my width here, but that is for all buttons */***
}
ul.dropdown-menu { border: none }
.head-section .nav li a:hover,
.head-section .nav li a:focus,
.head-section .nav li.active a,
.head-section .nav li.active a:hover,
.head-section .nav li a.dropdown-toggle:hover,
.head-section .nav li a.dropdown-toggle:focus,
.head-section .nav li.active ul.dropdown-menu li a:hover,
.head-section .nav li.active ul.dropdown-menu li.active a {
color: #fff;
background-color: #48cfad;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.head-section .navbar-default .navbar-nav > .open > a,
.head-section .navbar-default .navbar-nav > .open > a:hover,
.head-section .navbar-default .navbar-nav > .open > a:focus {
color: #fff;
background-color: #48cfad;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.head-section .navbar { min-height: 85px }
.head-section .navbar-nav > li {
padding-bottom: 25px;
padding-top: 30px;
}
.head-section ul.navbar-nav li:last-child() { margin-left: 10px !important }
.head-section .navbar-nav > li > a {
padding-bottom: 5px;
padding-top: 5px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
margin-left: 2px;
line-height: 30px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.dropdown-menu li a:hover { color: #fff !important }
.head-section .navbar-default .navbar-nav > .open > a .caret,
.navbar-default .nav li.dropdown > a:focus .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
color: #fff;
}
.dropdown-menu { box-shadow: none }
.head-section .nav li .dropdown-menu {
margin-top: -5px;
padding: 0;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
}
.head-section .nav li .dropdown-menu li a {
line-height: 30px;
padding: 3px 12px;
border-bottom: 1px solid #F3E8E8;
}