I am having trouble with the nav bar in the webpage. The buttons do not float to the right?
Here is my HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/my.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- This is where the code starts -->
<body data-spy="scroll" data-target=".navbar" data-offset="100">
<!-- Top navigation -->
<nav class= "navbar navbar-toggleable-sm navbar-inverse fixed-top" style="background-color:purple;">
<div class="container">
<a class="navbar-brand" href="#">
<img src="http://qlip.in/images/qlip.png" height="50">
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target=#mainNav>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav">
<li><a class="nav-item nav-link" href="#about"><strong><span class="edit">ABOUT</span></strong></a></li>
<li><a class="nav-item nav-link first" href="#portfolio"><strong><span class="edit">PORTFOLIO</span></strong></a></li>
<li><a class="nav-item nav-link" href="#contact"><strong><span class="edit">CONTACT</span></strong></a></li>
</ul>
</div>
</div>
</nav>
<!-- About Section -->
<div id="about">
Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.<br>
<img src="http://qlip.in/images/avatar.jpg"><br>
Web Developer - User Experience Designer - Graphic Artist
</div>
<div id="portfolio">
<p>Hi</p>
</div>
</body>
This is my CSS:
.edit{
color:grey;
font-size:15px;
}
.active{
background-color:white;
}
body {
padding-top: 75px;
}
ul.nav{
float:right;
}
nav ul li{
list-style:none;
float:right;
margin:10px;
}
I have tried a lot of things but none of them seem to work.