How to align part of the navigation content to the right?-CodePudding

My navigation bar's code is as follows:

index.html

<header id="header" class="flex">
  <h2 id="site-name"><a href="#">RandomSite</a></h2>

    <!-- NAVIGATION -->
    <nav id="header-nav">
      <h3 class="hidden">RandomSite's hidden navigation</h3>
      <ul class="nav-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

</header>

styles.css

/* NAVIGATION */
header {
    border: 2px dashed black;
    display: flex;
    padding: 10px;
}

header h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 16px 0px;
}

.nav-list {
    list-style-type: none;
    display: flex;
    float: right;
}

li {
    list-style: none;
    display: inline;
    padding: 0px 5px 0px 0px;
}

This is what my navbar looks like. I want the unordered list contents to be aligned to the right. How do I do that? Navigation bar screenshot

CodePudding user response：

You need to add justify-content: space-between to the class .header.
Also, to remove the default underline of the <a> tag you must use text-decoration:none, and for hidden the element with class .hidden use display:none.

/* NAVIGATION */
header {
    border: 2px dashed black;
    display: flex;
    justify-content:space-between;
    padding: 10px;
}

header h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 16px 0px;
}

.nav-list {
    list-style-type: none;
    display: flex;
    float: right;
}
.hidden{
  display:none;
/*   visibility:hidden; */
}
li {
    list-style: none;
    display: inline;
    padding: 0px 5px 0px 0px;
}
#site-name a {
    text-decoration:none;
    color: black;
}
.nav-list a {
    text-decoration:none;
    color: black;
}
*{font-family:sans-serif}

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <header id="header" class="flex">
  <h2 id="site-name"><a href="#">RandomSite</a></h2>

    <!-- NAVIGATION -->
    <nav id="header-nav">
      <h3 class="hidden">RandomSite's hidden navigation</h3>
      <ul class="nav-list">
        <li><a href="#!">Home</a></li>
        <li><a href="#!">News</a></li>
        <li><a href="#!">Blog</a></li>
        <li><a href="#!">About</a></li>
        <li><a href="#!">Contact</a></li>
      </ul>
    </nav>
</header>
</body>
</html>

CodePudding user response：

I removed all the unnecessary code that you had before. I added a bit of padding to your a tags so that it will look nicer. To make your nav items move to the right, just add space-between and it will fix your problem.

* {
  font-family: sans-serif;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px dashed black;
    padding: 10px;
}

header h2 {
    font-size: 18px;
    margin: 16px 0px;
}

header a {
  text-decoration: none;
}

li > a {
  color: #484b4f;
  padding: 0.5rem;
}

header > h2 > a {
  color: black;
}

.nav-list {
  list-style-type: none;
}

li {
  display: inline;
}

<header>
  <h2 className="header-site-name">
    <a href="#">RandomSite</a>
  </h2>
    <nav>
      <ul class="nav-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
</header>