Float:right and text-align:right don't work

Question

So I want to make the list elements that say "Home", "Portfolio", and "Contact" be on the right side. I've tried float:right and text-align:right, but neither of them work for me, I don't know what is wrong. I'm using bootstrap, which I'm new to, maybe that is the problem?
This is my html

    <!DOCTYPE html>
    <html lang = "en">

    <head>


      <meta charset = "utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta name="description" content="">
      <meta name="author" content="">

      <title>Webworld</title>
      <link rel= "stylesheet" href = "bootstrap4 copy.css">
      <link rel = "stylesheet" href = "style.css">
      <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">

    </head>
    <body id="page-top">
    <nav class="navbar fixed-top navbar-toggleable-md navbar-light" id="mainNav">
            <a class="navbar-brand cursive" href="#page-top" style="text-decoration:none;">Webworld</a>
            <div class="collapse navbar-collapse" id="navbarExample">
                <ul class="navbar-nav text-right">
                    <li class="nav-item">
                        <a class="nav-link" href="#home" style="text-decoration:none;">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#portfolio" style="text-decoration:none;">Portfolio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact" style="text-decoration:none;">Contact</a>
                    </li>
                </ul>
                <hr>
            </div>
    </nav>
    <header>
    <div class="container white">

    </div>
    </header>
    </body>
    </html>





<!-- This is the css! -->
.cursive {
  font-family:Pacifico;
  font-size:27px;
}


li{
  font-size:14px;
}


nav {
  border-radius:1px;
  border-bottom:solid white 1px;
  text-align:right;
  height:90px;
  margin-left:200px;
  margin-right:200px;
}


.navbar-light .navbar-nav .nav-link, .navbar-light .navbar-brand{
  color: #fff;
  float:right;
  text-align:right;
}

neither of these work

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-brand:hover{
  color: #fff;
}


.navbar-light .navbar-nav .nav-link:active, .navbar-light .navbar-brand:active{
  color: #fff;
}


header {
  background-image:url(contact-1920x580.jpg);
  width:100%;
  height:358px;
}


.white {
  height:600px;
  width:100%;
  top:370px;
}


ul .navbar-nav .text-right{
  position:relative;
  float:right;
}


li {
  float:right;
  clear:right;
}

There's no need for extra CSS to align it. Just use `ml-auto` on the `navbar-nav` to "push" it to the right. https://www.codeply.com/go/KbfmpKdAws — Carol Skelly, Jul 14 '17 at 12:50

score 1 · Answer 1 · answered Jul 14 '17 at 11:57

Is this what you need? I used a flexbox to make a horizontal menu that's aligned at the right side.

.cursive {
  font-family: Pacifico;
  font-size: 27px;
}

li {
  font-size: 14px;
  padding: 1em;
  list-style: none;
}

nav {
  border-radius: 1px;
  border-bottom: solid white 1px;
  height: 90px;
  margin-left: 200px;
  margin-right: 200px;
}

.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-brand {
  color: blue;
}

.nav-item a {
text-decoration: none;
}

.navbar-nav {
padding: 0;
margin: 0;
display: flex;
justify-content: flex-end;
}

<nav class="navbar fixed-top navbar-toggleable-md navbar-light" id="mainNav">
  <a class="navbar-brand cursive" href="#page-top" style="text-decoration:none;">Webworld</a>
  <div class="collapse navbar-collapse" id="navbarExample">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#portfolio">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>
    <hr>
  </div>
</nav>
<header>
  <div class="container white">
  </div>
</header>

score 1 · Answer 2 · answered Jul 14 '17 at 12:04

1

Remove <hr> and add ml-auto class on your <ul>.

Codepen

answered Jul 14 '17 at 12:04

fen1x

5,616
6
28
39

Float:right and text-align:right don't work

2 Answers2