Help in the Personal portfolio project?

Help in the Personal portfolio project?


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=""></script>
<script src="/js/my.js"></script>
<link rel="stylesheet" href="" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="" 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="" height="50">
<button class="navbar-toggler" data-toggle="collapse" data-target=#mainNav>
<span class="navbar-toggler-icon"></span>
<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>
<!-- 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=""><br>
Web Developer - User Experience Designer - Graphic Artist
<div id="portfolio">

This is my CSS:

body { 
    padding-top: 75px; 
nav ul li{

I have tried a lot of things but none of them seem to work.


can you put this in a codepen next time? Makes it alot easier for us to help you.

At first I was completely lost… Then I realized you were using bootstrap 4. Things work a little different there with the inclusion of flexbox. First remove all those float: right; styles.

On your div.navbar-nav tag add .ml-auto.
This should push your navbar elements to right.

On the other hand .mr-auto will bring it to the left… Weird I know…

Heres an example.

<ul class="navbar-nav ml-auto">
    <li><a href="#">Right</a></li>
    <li><a href="#">Right</a></li>
    <li><a href="#">Right</a></li>

Happy coding! :slight_smile:


Thanks so much. I’ll just include the codepen next time.