расстановка элементов навигации

Question

Пытаюсь сделать навигацию по сайту. У всего сайта, кроме футера есть отступы слева и справа по 230px. Мне нужно, чтобы последний элемент навигации был выровнен по правому краю и не заходил за границы, но когда я пытаюсь сдвинуть его вправо на максимум, то есть делаю margin 100% слева, он выравнивается не так, как надо и весь элемент находится за нужной границей

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

body {
	margin-left: 230px; /* отступы */
	margin-right: 230px;
	margin-bottom: 0;
}

#q1 { /* header */
	color: #454545;
	font-family: 'Pacifico', sans-serif;
	font-weight: 200;
	font-size: 40px;
}

.nav {
	list-style-type: none; /* Убираем маркеры у элементов списка */
	font-family: 'Bebas Neue', serif;
}

.m a {  /* the main-основной nav */
	font-size: 25px;
	color: #454545;
	position: absolute;
	top: 45px;
	text-decoration: none; /* убираем подчёркивание у ссылки */
}

.add { /* additional-дополнительное, span к nav */
	font-size: 15px;
	color: #BFBFBF;
	position: absolute;
	top: 30px;
}

.nav1 {
	margin-left: 40%; /*351*/
}


.nav2 {
	margin-left: 52.5%;
}

.nav3 {
	margin-left: 65%;
}

.nav4 {
	margin-left: 80%;
}

.nav5 {
	margin-left: 100%;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>About</title>
		<link href="about.css" rel="stylesheet" type="text/css">
		<link rel="shortcut icon" href="img_Blitz/mini3.ico" type="image/x-icon">
		<link href="https://fonts.googleapis.com/css?family=Bebas+Neue|Pacifico&display=swap" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
		<link rel="shortcut icon" href="C:\Users\Екатерина\Desktop/Blitz\img_Blitz\mini3.ico" type="image/x-icon">
	</head>
	<body>
		<header id="q1">Blitz</header>
		<nav>
			<div class="nav1">
			<span class="nav add">HOMEPAGE</span>
			<li class="nav m"><a href="C:\Users\Екатерина\Desktop\Blitz\home.html">HOME</a></li>
			</div>
			<div class="nav2">
			<span class="nav add">WHO WE ARE?</span>
			<li class="nav m"><a href="C:\Users\Екатерина\Desktop\Blitz\about\about.html">ABOUT</a></li>
			</div>
			<div class="nav3">
			<span class="nav add">MY PORTFOLIO</span>
			<li class="nav m"><a href="#">PROJECTS</a></li>
			</div>
			<div class="nav4">
			<span class="nav add">LATEST NEWS</span>
			<li class="nav m"><a href="#">BLOG</a></li>
			</div>
			<div class="nav5">
			<span class="nav add">GET IN TOUCH</span>
			<li class="nav m"><a href="#">CONTACT</a></li>
			</div>
		</nav>
	</body>
</html>

Upd: в окне для кода не достаточно место, поэтому там всё слиплось

Answer 1

Вообще расставлять элементы навигации таким образом весьма оригинально :) Попробуй использовать flexbox как вариант. И еще... если заюзал li, то элементы списка надо вписывать в ul или ol так будет правильно.

Answer 2

Наверно если писать капсом это зашкварно но всё же, я чуть чуть исправил html а из css взял только font-family

В css есть такое правило text-transform: uppercase вот если надо текст написать большими буквами то есть в верхнем регистре применяйте его

добавил один медиа запрос в котором при до 520px он сработает и уберёт .add что бы это увидеть откройте сниппет на весь экран а сам браузер сожмите

* {
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

.top,
nav {
  display: flex;
  justify-content: space-between;
  font-family: sans-serif;
  align-items: center;
}

header {
  font-family: 'Pacifico', sans-serif;
  font-size: 30px;
  margin-right: 20px;
}

[class*="nav"] {
  margin-right: 10px;
  font-family: 'Bebas Neue', serif;
}

@media(max-width:520px) {
  .add {
    display: none;
  }
  header {
    font-size: 24px;
  }
}

<link href="https://fonts.googleapis.com/css?family=Bebas+Neue|Pacifico&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="top">

  <header id="q1">Blitz</header>
  <span class="trigger">
      <i></i>
      <i></i>
      <i></i>
    </span>
  <nav>
    <div class="nav1">
      <span class="nav add">HOMEPAGE</span>
      <li class="nav m"><a href="C:\Users\Екатерина\Desktop\Blitz\home.html">HOME</a></li>
    </div>
    <div class="nav2">
      <span class="nav add">WHO WE ARE?</span>
      <li class="nav m"><a href="C:\Users\Екатерина\Desktop\Blitz\about\about.html">ABOUT</a></li>
    </div>
    <div class="nav3">
      <span class="nav add">MY PORTFOLIO</span>
      <li class="nav m"><a href="#">PROJECTS</a></li>
    </div>
    <div class="nav4">
      <span class="nav add">LATEST NEWS</span>
      <li class="nav m"><a href="#">BLOG</a></li>
    </div>
  </nav>
  <div class="nav5">
    <span class="nav add">GET IN TOUCH</span>
    <li class="nav m"><a href="#">CONTACT</a></li>
  </div>
</div>

Answer 3

li-элементы нужно заворачивать в ul
лучше не пользоваться так активно абсолютным позиционированием
можно использовать свойство CSS columns

https://codepen.io/DoubleS/pen/bGdMEQQ

body {
  min-width: 480px;
  margin: 0 230px;
}

#q1 {
  display: inline-block;
  float: left;
  min-width: 80px;
  font-weight: 200;
  font-size: 40px;
  font-family: "Pacifico", sans-serif;
  /* header */
  color: #454545;
}

.nav {
  list-style-type: none; 
  font-family: "Bebas Neue", serif;
  columns: 5;
  min-height: 70px;
}

.m {
  display: inline-block;
  min-width: 100px;
  min-height:70px;
}

.m a {
  font-size: 25px;
  color: #454545;
  text-decoration: none;
}

.add {
  display: block;

  font-size: 15px;
  color: #bfbfbf;
}
 .m div {
  margin:  9px 0 0 0;
  padding: 0;
}

@media screen and (min-width: 1000px) {
  .m {
    min-width: 200px;
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>About</title>
    <link href="about.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="img_Blitz/mini3.ico" type="image/x-icon" />
    <link
      href="https://fonts.googleapis.com/css?family=Bebas+Neue|Pacifico&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
      rel="stylesheet"
    />
    <link
      rel="shortcut icon"
      href="C:\Users\Екатерина\Desktop/Blitz\img_Blitz\mini3.ico"
      type="image/x-icon"
    />
   
  </head>
  <body>
    <header>
      <div id="q1">Blitz</div>
    <nav>
      <ul class="nav">
        <li class="m">
          <div>
            <span class="add">HOMEPAGE</span>
            <a href="C:\Users\Екатерина\Desktop\Blitz\home.html">HOME</a>
          </div>
        </li>

        <li class="m">
          <div>
            <span class="add">WHO WE ARE?</span>
            <a href="C:\Users\Екатерина\Desktop\Blitz\about\about.html"
              >ABOUT</a
            >
          </div>
        </li>

        <li class="m">
          <div>
            <span class="add">MY PORTFOLIO</span>
            <a href="#">PROJECTS</a>
          </div>
        </li>

        <li class="m">
          <div>
            <span class="add">LATEST NEWS</span>
            <a href="#">BLOG</a>
          </div>
        </li>

        <li class="m">
          <div>
            <span class="add">GET IN TOUCH</span>
            <a href="#">CONTACT</a>
          </div>
        </li>

      </ul>
    </nav>
    </header>
  </body>
</html>

БЛОГ НА HUSL

расстановка элементов навигации

Ответы (3 шт):