float the text in the navbar right - html

Question

I would like that my navbar is floating right. I tried to set the <ul class="nav navbar-nav float="right", but the navbar is still centered. I am quite sure that the float should be on this tag? I also tried with text-align:right;, which did not work either.
Is there something I am missing here?
HTML
<!-- page wrapper start -->
<!-- ================ -->
<div class="page-wrapper">
<!-- header-container start -->
<div class="header-container">
<!-- header start -->
<!-- classes: -->
<!-- "fixed": enables fixed navigation mode (sticky menu) e.g. class="header fixed clearfix" -->
<!-- "dark": dark version of header e.g. class="header dark clearfix" -->
<!-- "full-width": mandatory class for the full-width menu layout -->
<!-- "centered": mandatory class for the centered logo layout -->
<!-- ================ -->
<header class="header fixed clearfix">
<div class="container">
<div class="row">
<div class="col-md-3 ">
<!-- header-left start -->
<!-- ================ -->
<div class="header-left clearfix">
<!-- header dropdown buttons -->
<div class="header-dropdown-buttons visible-xs">
<div class="btn-group dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-search"></i></button>
<ul class="dropdown-menu dropdown-menu-right dropdown-animation">
<li>
<form role="search" class="search-box margin-clear">
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Search">
<i class="icon-search form-control-feedback"></i>
</div>
</form>
</li>
</ul>
</div>
</div>
<!-- header dropdown buttons end-->
<!-- logo -->
<div id="logo" class="logo">
<img id="logo_img" src="http://<?php echo $_SERVER['HTTP_HOST'] ?>/images/graphics/logo.png" >
</div>
</div>
<!-- header-left end -->
</div>
<div class="col-md-9">
<!-- header-right start -->
<!-- ================ -->
<div class="header-right clearfix">
<!-- main-navigation start -->
<!-- classes: -->
<!-- "onclick": Makes the dropdowns open on click, this the default bootstrap behavior e.g. class="main-navigation onclick" -->
<!-- "animated": Enables animations on dropdowns opening e.g. class="main-navigation animated" -->
<!-- "with-dropdown-buttons": Mandatory class that adds extra space, to the main navigation, for the search and cart dropdowns -->
<!-- ================ -->
<div class="main-navigation animated with-dropdown-buttons">
<!-- navbar start -->
<!-- ================ -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<!-- main-menu -->
<ul class="nav navbar-nav" float="right">
<!-- mega-menu start -->
<li class="mega-menu">
Hjem
</li>
<!-- mega-menu end -->
<!-- mega-menu start -->
<li class="dropdown mega-menu">
Kompetencer
<ul class="dropdown-menu">
<li>
<div class="row">
<div class="col-lg-8 col-md-9">
<div class="row">
<div class="col-sm-4">
<h4 class="title">UX/UI</h4>
<div class="divider"></div>
<ul class="menu">
<li ><i class="fa fa-angle-right"></i>UX/UI</li>
<li ><i class="fa fa-angle-right"></i>Prototyping</li>
<li ><i class="fa fa-angle-right"></i>Web Design</li>
<li ><i class="fa fa-angle-right"></i>Grafisk Design</li>
</ul>
</div>
<div class="col-sm-4">
<h4 class="title">Webudvikling</h4>
<div class="divider"></div>
<ul class="menu">
<li ><i class="fa fa-angle-right"></i>Webudvikling</li>
<li ><i class="fa fa-angle-right"></i>PHP & MySQL databaser</li>
<li ><i class="fa fa-angle-right"></i>Wordpress</li>
<li ><i class="fa fa-angle-right"></i>Umbraco</li>
<li ><i class="fa fa-angle-right"></i>Joomla</li>
</ul>
</div>
<div class="col-sm-4">
<h4 class="title">Marketing Automation</h4>
<div class="divider"></div>
<ul class="menu">
<li ><i class="fa fa-angle-right"></i>Mautic</li>
<li ><i class="fa fa-angle-right"></i>Landesider</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 hidden-sm">
<h4 class="title">Oversigt over kompetencer</h4>
<p class="mb-10"><u>En oversigt over alle mine kompetencer</u></p>
<img src="http://<?php echo $_SERVER['HTTP_HOST']?>/images/graphics/kompetencer.png" alt="The Project">
</div>
</div>
</li>
</ul>
</li>
<li class="mega-menu">
Portfolio
</li>
<!-- mega-menu end -->
<li class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Profil</a>
<ul class="dropdown-menu">
<li>Uddannelse</li>
<li >Erhvervserfaring</li>
<li >Personlighed</li>
</ul>
</li>
<li class="mega-menu">
Artikler
</li>
<!-- mega-menu start -->
<!-- mega-menu start -->
<li class="mega-menu">
Kontakt
</li>
</ul>
<!-- main-menu end -->
</div>
</div>
</nav>
<!-- navbar end -->
</div>
<!-- main-navigation end -->
</div>
<!-- header-right end -->
</div>
</div>
</div>
</header>
<!-- header end -->
</div>
<!-- header-container end -->

Answer 1

There are few reasons it is positioned to the left. You need to target the container that the nav is in first. It has a padding to the right. Remove this:
.with-dropdown-buttons .navbar-default .navbar-collapse {
padding-right: 0;
}
Then you can float the navbar to the right, but you'll need to be specific about screen widths.
#media (min-width: 768px) {
.navbar-nav {
float: right;
}
}
This works for me when I make these changes in the developer tools. If it doesn't work you will need to check if it correctly overriding bootstrap CSS, or you can use !important.
EDIT
You might also want to remove the padding on the last menu item, to make it flush with the edge of your container. You can try:
.navbar-default .navbar-nav > li:last-child > a {
padding-right: 0;
}

Answer 2

float is a CSS attribute. You may use it this way:
<ul class="nav navbar-nav" style="float: right;">
...
</ul>
Note that UL is a block tag and covers all the width. So, if you want it to fill less that all of the window's width, you should set the width attribute for it as well.
<ul class="nav navbar-nav" style="float: right; width: 800px;">
...
</ul>