Problems aligning div on the right side

Question

I’m having a problem lining up the div. btns on the right side of the header, I’ve tried it: Justify-self: flex-end and end; I’ve also tried align-self: flex-end, and I can’t get it to go to the right side. Where I’m going wrong?

*{
                margin: 0;
                padding: 0;
            }
            :root{
                --secundaryColor: #50cf80;
                --primaryColor: #7159c1;
                --whiteColor: #FFF;
                --familyText: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
                --redColor: red;
                --dark: #333;
            }
            html, body{
                max-height: 100vh;
                max-width: 100vw;
                width: 100%;
                height: 100%;
                background: var(--whiteColor);
                font-family: var(--familyText);
            }
            div.menu{
                display: flex;
                position: fixed;
                flex-direction: row;
                width: 100%;
                padding: 10px;
                background: var(--dark);
            }
            div.logo h1{
                color: var(--primaryColor);
            }
            div.btns{
                display: flex;
                flex-direction: row;
                align-items: center;
            }
            div.btns a{
                color: #FFF;
                padding: 10px;
                cursor: pointer;
            }
            .big{
                background: var(--secundaryColor);
                text-decoration: none;
                border-radius: 3px;
            }

        <div class="menu">
            <div class="logo">
                <h1>Net EveryWhere</h1>
                <p>By IMM Telecom</p>
            </div>
            <div class="btns">
                <a href="#">Condições</a>
                <a href="#">Pacotes</a>
                <a href="#" class="big">Iniciar Sessão</a>
            </div>
        </div>

Answer 1

If the flex container this one with flex-direction: row, which is the standard, you have to use margin to align child elements in andixo X, then a simple margin-left: auto in div.btns solves your problem.

OBS: Another option is to place the property justify-content: space-between; in the PAI container, and not margin-left in the son, this too will cause the div.btns stand to the right.

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  margin: 0;
  padding: 0;
}

:root {
  --secundaryColor: #50cf80;
  --primaryColor: #7159c1;
  --whiteColor: #FFF;
  --familyText: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --redColor: red;
  --dark: #333;
}

html,
body {
  max-height: 100vh;
  max-width: 100vw;
  width: 100%;
  height: 100%;
  background: var(--whiteColor);
  font-family: var(--familyText);
}

div.menu {
  display: flex;
  position: fixed;
  flex-direction: row;
  width: 100%;
  padding: 10px;
  background: var(--dark);
}

div.logo h1 {
  color: var(--primaryColor);
}

div.btns {
  display: flex;
  flex-direction: row;
  align-items: center;

  margin-left: auto;
}

div.btns a {
  color: #FFF;
  padding: 10px;
  cursor: pointer;
}

.big {
  background: var(--secundaryColor);
  text-decoration: none;
  border-radius: 3px;
}

<div class="menu">
  <div class="logo">
    <h1>Net EveryWhere</h1>
    <p>By IMM Telecom</p>
  </div>
  <div class="btns">
    <a href="#">Condições</a>
    <a href="#">Pacotes</a>
    <a href="#" class="big">Iniciar Sessão</a>
  </div>
</div>