javascripthtmlcssflexboxnav

I am trying to put my links on the right side of the screen using margin-left:auto, but its on the left side

I am creating a navbar using flex CSS. My problem is that I wanted the links to be on the right side of the screen, but they are on the left side and next to the title which is what I do not want. I have tried margin-left: auto, but it does not work. Is there a different solution to this problem? The image down below:

Image of Navbar

[Solved] Adding width: 100%; to my nav class works, thank you Derek Bolger!

Here is the code:

@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

/*
font-family: 'Poppins', sans-serif;
font-family: 'Montserrat Alternates', sans-serif;
*/

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  background-color: #fff;
}

nav {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  position: fixed;
  align-content: center;
  background-color: transparent;
}

.name-title {
  font-family: "Montserrat Alternates", sans-serif;
  font-size: xx-large;
  color: #000;
}

nav ul {
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin-top: 10px;
}

nav li {
  list-style: none;
}

nav a {
  font-family: "Poppins", sans-serif;
  font-size: medium;
  padding-right: 2em;
  text-decoration: none;
  color: #000;
}
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!--Font Awesome CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<nav>
  <div class="name-title">Ayush Kumar</div>
  <ul>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
  </ul>
</nav>

Solution

  • Just add width: 100%; to Nav

     nav {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    position: fixed;
    align-content: center;
    background-color: transparent;
    width: 100%;
}

    or remove position fixed