Alignment of elements in the header

Question

I’m a programmer and I haven’t manipulated for a long time HTML/CSS, now I need to create a portal for a small application and I’m having difficulty in some issues related to the alignment of elements with CSS.

I need to keep the search bar in the center as it is, and put the Logout link there in the right corner of the top bar, but I’m not being able to align the elements in the header.

If anyone can teach me I really appreciate it, I’ve done a lot of research on the alignment parameters, but I’m a little confused.

/* Template de cards para exibir os elementos */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;800&display=swap");
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  min-height: 100vh;
  background: #232427;
}

body .container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 40px 0;
  padding-top: 20px;
}

body .container .card {
  position: relative;
  min-width: 320px;
  height: 380px;
  box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2), inset -5px -5px 15px rgba(255, 255, 255, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1);
  border-radius: 25px;
  margin: 30px;
  transition: 0.5s;
}

img {
  border-radius: 80%;
}

body .container .card .box {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  background: #2a2b2f;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 0.5s;
}

body .container .card .box:hover {
  transform: translateY(-4px);
}

body .container .card .box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.03);
}

body .container .card .box .content {
  padding: 20px 5px 20px 5px;
  text-align: center;
}

body .container .card .box .content h2 {
  position: absolute;
  top: 1px;
  /* original: -10px */
  right: 10px;
  /* original: 30px */
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.1);
}

body .container .card .box .content h3 {
  font-size: 1rem;
  color: #fff;
  z-index: 1;
  transition: 0.5s;
  margin-bottom: 12px;
  color: #1ea6f598;
}

body .container .card .box .content p {
  font-size: 0.8rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  z-index: 1;
  transition: 0.5s;
}

body .container .card .box .content a {
  position: relative;
  display: inline-block;
  padding: 6px 20px;
  background: #2196f3;
  border-radius: 5px;
  text-decoration: none;
  color: white;
  margin-top: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transition: 0.5s;
}

body .container .card .box .content a:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
  background: rgba(165, 27, 27, 0.705);
  color: white;
}




/* Estilo da barra de pesquisa no topo do site */
#click {
  display: none;
}

.main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main label {
  position: absolute;
  background-color: rgb(30, 166, 245);
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  transition: .6s;
}

span:nth-child(1) {
  display: flex;
  position: absolute;
  top: 11px;
  left: 11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 4px solid #fff;
  transition: .4s;
}

span:nth-child(2), span:nth-child(3) {
  display: flex;
  position: absolute;
  top: 31px;
  left: 26px;
  width: 12px;
  height: 4px;
  border-radius: 3px;
  background: #fff;
  transform: rotate(45deg);
  transition: .5s;
}

#barraSuperior {
  display: block;
  position: fixed;
  padding: 35px;
  top: 0;
  left: 0;
  width: 100%;
  background: #202124;
  text-align: center;
  z-index: 99;
}

#barraSuperior a {
  color: #c01111;
}

.main #barraPesquisa {
  position: absolute;
  height: 50px;
  width: 50px;
  font-size: 22px;
  padding: 0 20px;
  background: #fff;
  border-radius: 50px;
  color: #2196f3;
  transition: .6s;
}

#click:checked~.main #barraPesquisa {
  width: 300px;
}

#click:checked~.main label {
  margin-left: 250px;
}

#click:checked~.main span:nth-child(1) {
  opacity: 0;
}

#click:checked~.main span:nth-child(2), #click:checked~.main span:nth-child(3) {
  top: 22px;
  left: 15px;
  width: 20px;
  height: 5px;
}

#click:checked~.main #barraPesquisa {
  box-shadow: 0 0 10px rgb(90, 217, 255);
}

#click:checked~.main span:nth-child(3) {
  transform: rotate(-45deg);
}




/* Estilo do loading do site ao abrir */
div#container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: #eee;
  display: block;
}

div#loader {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: #eee;
  background-image: url('../img/load.gif');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

<html lang="pt-br">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Tele Conteúdo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>

<body>
  <div id="loader"></div>
  <script type="text/javascript">
    jQuery(window).on('load', function() {
        jQuery("#loader").delay(400).fadeOut("slow");
    });
  </script>
  <header id="barraSuperior">
  <a href="#">Sair do sistema></a>
    <input id="click" type="checkbox">
    <div class="main">
      <input type="text" id="barraPesquisa" autocomplete="off">
      <label for="click">
        <span></span>
        <span></span>
        <span></span>
      </label>
    </div>
  </header>
</body>
</html>

Answer 1

You can use the property right on your logout tag, and set the distance from the right margin. Next to the position: absolute;

That would be your style:

#barraSuperior a {
  color: #c01111;
  
  position: absolute;
  right: 20px;

}