Позиционирование блока в меню шапки

121
01 мая 2021, 05:30

пытаюсь переместить второе меню в правую часть экрана, но не выходит. Я плохо разбираюсь в позиционирование элементов, не могли бы вы подсказать как исправить мою проблему и на каких источниках можно изучить позиционирование элементов.

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
a { 
  text-decoration: none; 
} 
 
li { 
  text-decoration: none; 
  list-style: none; 
} 
 
body { 
  font-family: "Roboto", sans-serif; 
  position: relative; 
} 
   
nav { 
  margin-top: -2%; 
} 
 
.logo { 
  font-size: 45px; 
  color: #3E4554; 
  padding: 12px 5px; 
  font-weight: 700; 
} 
 
.search { 
  display: flex; 
  display: inline-block; 
} 
 
.search input { 
  margin-left: 128px; 
} 
 
.header { 
  width: 100%; 
  padding: 50px; 
} 
 
.menu { 
  display: inline-block; 
  margin-left: 42px; 
} 
 
.menu a { 
  margin-right: 50px; 
  color: #3E4554; 
} 
 
.menu a:hover { 
  color: #6A7BFF; 
} 
 
.rightmenu { 
  position: absolute; 
  right: 0; 
 
   
} 
 
.rightmenu a { 
  color: #3E4554; 
  margin-right: 35px; 
   
} 
 
.rightmenu a:hover { 
  color: #6A7BFF; 
}
<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Sport-defense - Main</title> 
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content="Спортивный проект для достижений"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"> 
    <link rel="icon" href="favicon.ico" type="img/favicon"> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
 
<body> 
  <header> 
      
<nav>    
    <div class="header"> 
        <div> 
        <a class="logo"><img alt="Logo" src="#"/></a> 
            <form class="search" action="site.html"> 
                <input name="s" placeholder="Поиск" type="search"> 
            </form> 
            <div class="menu"> 
                <a href="#">Новости</a> 
                <a href="#">Рейтинг</a> 
                <a href="#">Соревнования</a> 
                <a href="#">Событие</a> 
            </div> 
        </div> 
    </div> 
    <div class="rightmenu"> 
        <a href="#">Подписка</a> 
        <a href="#">Подписка</a> 
        <a href="#">Подписка</a> 
        <a href="#">Подписка</a> 
        <a href="#">Подписка</a> 
    </div> 
</nav>      
 
 
 
 
  </header> 
 
<main> 
<aside class="secondary-nav" aria-label="Site bar"> 
   <h1>Ваши тренировки</h1> 
    <section> 
            <h2>Готовые программы для занятия</h2> 
        <ul> 
            <li><a href="#">Главная</a></li> 
            <li><a href="#">Отжимания</a></li> 
            <li><a href="#">Подтягивания</a></li> 
            <li><a href="#">Приседания</a></li> 
            <li><a href="#">Брусья</a></li> 
        </ul> 
    </section>  
             
 <section class="secondary-nav1" aria-label="Secondary"> 
        <ul> 
             <li><a href="#">To-Do list</a></li> 
            <li><a href="#">План тренировок</a></li> 
            <li><a href="#">Питание</a></li> 
            <li><a href="#">Задачи</a></li> 
            <li><a href="#">Цели</a></li> 
            <li><a href="#">Своя тренировка</a></li> 
        </ul> 
</section>         
</aside> 
 
 <form action="/site.html">           
    <img src="background.png" alt="Фон профиля"> 
        <input type="file"> 
 </form> 
 
<form action="/site.html"> 
    <img src="avatar.jpg" alt="Аватар пользователя"> 
        <input type="file"> 
</form> 
 
<div class="data"> 
    <p>Масиков Артем</p> 
        <ul> 
            <li>sport-defense/hydramist</li> 
            <li>Написать</li> 
            <li>Следовать</li> 
        </ul> 
</div> 
 
<aside class="social" aria-label="Secondary">   
    <ul> 
        <li><a href="#">Twitter</a></li> 
        <li><a href="#">YouTube</a></li> 
        <li><a href="#">Instagram</a></li> 
        <li><a href="#">Facebook</a></li> 
    </ul> 
</aside>  
 
<div> 
    <a>Россия, Красноярск</a> 
    <a>Регистрация, 1 месяц назад</a> 
    <a>Full Stack Developer | Co-Founder & Front-End Developer of this very site.</a> 
</div> 
     
<div> 
    <p>Ваши данные</p> 
    <a href="#">Статистика</a> 
    <a href="#">Достиженния</a> 
    <a href="#">Ваши новости</a> 
    <a href="#">Фотоальбом</a> 
</div> 
</main> 
 
<footer> 
<ul> 
    <li><a href="#">Политика конфиденциальности</a></li> 
    <li><a href="#">Пользовательское соглашение</a></li> 
    <li><a href="#">Правила сообщества</a></li> 
    <li><a href="#">Еще</a></li> 
</ul>     
 
<script defer src="/js/load.js"></script> 
</footer> 
</body> 
</html>

READ ALSO
Как анимировать радиальный градиент с помощью CSS?
CSS

Как анимировать радиальный градиент с помощью CSS?

Я пытаюсь создать эффект анимации блеска с радиальным градиентом для блока div, но я не уверен, что мой способ, - лучший способ сделать это

 122
Создание копий при возвращении из функции
c++

Создание копий при возвращении из функции

Всё глубже и глубже погружаясь в C++, я начинаю немного сходить с ума, виной этому то, что некоторые вещи я просто не могу объяснить, а заучивать...

 125
Glfw С++ Ввод русского текста с клавиатуры
c++

Glfw С++ Ввод русского текста с клавиатуры

Питаюсь вводить текст с клавиатуры и сразу отправляю в консоль, с английским без проблем но вместо русского вводить какие то цифры и английские...

 138
Несколько вопросов по указателям в С++
c++

Несколько вопросов по указателям в С++

Возникло несколько вопросов связанных с raw pointers в С++Рассмотрим следующий код

 102