Nav does not float right

Question

Nav does not float right

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

The buttons on my navbar do not float right. I already tried to apply float: right in the menu and also in the items but it does not help.

    .container{
       width: 100%;
       height: 100%;
       overflow-x: hidden;
    }

    body{
       font-family: Verdana, Geneva, Tahoma, sans-serif;
       background-image: url("imagens/cubos2.jpg");
       background-size: auto;
    }

    /*Formatações de itens do body*/
    .nav-menu{
       width: 100%;
       padding: 20px;
    }

    .nav-itens{
       padding: 30px;
       font-size: large;
       font-weight: bold;
       text-decoration: none;
    }

    .footer-menu{
       padding: 20px;
       position: absolute;
       bottom: 0;
    }

    .footer-itens{
       padding: 20px;
       text-decoration: none;
    }

<body class="container">
    <nav class="nav-menu">
        <a href="" class="nav-itens">Home</a>
        <a href="" class="nav-itens">Quem sou eu</a>
        <a href="" class="nav-itens">Como posso te ajudar</a>
        <a href="" class="nav-itens">Fale comigo</a>
    </nav>
    <div>
        <footer class="footer-menu">
            <a href="https://github.com/MatCunha" class="footer-itens">GitHub</a>
            <a href="https://www.behance.net/araujomathdb03" class="footer-itens">Behance</a>
            <a href="" class="footer-itens">LinkedIn</a>
        </footer>
    </div>
    <script src="script.js"></script>
</body>

html css

asked by anonymous 24.10.2018 / 23:25

2 answers

1

Probably you should have put float: right in the wrong place, see working in the example below:

.container{
   width: 100%;
   height: 100%;
   overflow-x: hidden;
}

body{
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   background-image: url("imagens/cubos2.jpg");
   background-size: auto;
}

/*Formatações de itens do body*/
.nav-menu{
   width: 100%;
   padding: 20px;
   background-color: #000;
}
.nav-itens {
   float: right;
}
a {
  text-decoration: none;
  color: #FFF;
}
footer {
  margin-top: 500px;
  background-color: red;
}

<nav class="nav-menu">
    <a href="" class="nav-itens">Home</a>
    <a href="" class="nav-itens">Quem sou eu</a>
    <a href="" class="nav-itens">Como posso te ajudar</a>
    <a href="" class="nav-itens">Fale comigo</a>
</nav>
<div>
    <footer class="footer-menu">
        <a href="https://github.com/MatCunha" class="footer-itens">GitHub</a>
        <a href="https://www.behance.net/araujomathdb03" class="footer-itens">Behance</a>
        <a href="" class="footer-itens">LinkedIn</a>
    </footer>
</div>

24.10.2018 / 23:42

Average, Minimum, and Maximum in a dictionary in python Import table into R without the names (skip line did not work)

score 1 · Accepted Answer

To align the items to the right, you can use the text-align attribute with the right value, which means right.

.container{
   width: 100%;
   height: 100%;
   overflow-x: hidden;
}

body{
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   background-image: url("https://i.stack.imgur.com/LdGXk.gif");
   background-size: auto;
}

/*Formatações de itens do body*/
.nav-menu{
   width: 100%;
   padding: 20px;
   text-align: right;
   background-image: url("https://i.stack.imgur.com/z6X9L.gif");
   background-size: auto;
}

<body class="container">

    <nav class="nav-menu">
        <a href="" class="nav-itens">Home</a>
        <a href="" class="nav-itens">Quem sou eu</a>
        <a href="" class="nav-itens">Como posso te ajudar</a>
        <a href="" class="nav-itens">Fale comigo</a>
    </nav>
    <div>
        <footer class="footer-menu">
            <a href="https://github.com/MatCunha" class="footer-itens">GitHub</a>
            <a href="https://www.behance.net/araujomathdb03" class="footer-itens">Behance</a>
            <a href="" class="footer-itens">LinkedIn</a>
        </footer>
    </div>
<script src="script.js"></script>
</body>

Note: You do not need to float, which can mess up your code.