My close button is lost when i use the " justify-content: space-between;"-CodePudding

I'm following this yt video how to make a website everything is good but after i finish when i try to click the menu button which on mobile view the close button is no where to be find?!?! i play around the css when i remove the justify-content: space-between; the button is back but in a awkward position.

here is the code:

@import url("https://fonts.googleapis.com/css2?family=Figtree&display=swap");
* {
  box-sizing: border-box;
  font: inherit;
  color: inherit;
}

body {
  font-family: "Figtree", sans-serif;
  padding: 0;
  margin: 0;

  color: #333;
}

p {
  max-width: 600;
}

.container {
  max-width: 1200px;
  padding: 24px;
  margin: 0 auto;

  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

header {
  display: flex;
  align-items: center;
}

.navigation {
  flex-grow: 1;
  margin-left: 40px;
}

.nav--item {
  text-decoration: none;
  color: #887c7c;
  margin-left: 24px;
}

.nav--item:first-child {
  margin-left: 0;
}

.nav--item--active {
  color: #333;
}

.nav--button {
  border: none;
  background: linear-gradient(
    to right top,
    #8c1587,
    #bb0073,
    #da1658,
    #ea453a,
    #eb6f12
  );
  padding: 10px 36px;
  border-radius: 50px;
  color: white;
}

main {
  display: flex;
  align-items: center;
}
.headline {
  font-size: 52px;
  font-weight: bolder;
  padding: 0;
  margin: 0;
}

.description {
  color: #585454;
  margin: 0;
  padding: 0;
  margin: 24px 0 40px 0;
}

.play-button {
  border: 1px solid #cda6da;
  border-radius: 50px;
  padding: 10px 36px;
  background: transparent;

  display: flex;
  align-items: center;

  background: linear-gradient(to right, #cf17c9 0%, #cf1512 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.play-button .fa-solid{
    background: inherit;
    font-size: 1.20rem;
    margin-right: 6px;
}

.main--content {
  flex: 1;
  margin: 40px 0 40px 0;
}

.main--img {
  flex: 1;
}

.main--img img{
    width: 100%;
}

footer{
    display: flex;
    color: #bdbdbd;

}

.socials{
    margin-right: 40px;
    
}

.socials--items{
    margin-right: 12px;
}

.socials--items:hover{
    color: #333;
}

.menu-button
{
    flex-grow: 1;
    display: none;
}

.menu-button button{
    border: none;
    background-color: transparent;
    font-size: 1.5rem;
}

.mobile-nav{
    position: fixed;
    width: 100vh;
    height: 100vh;
    background-color: white;
    padding: 24px;
    display: none;

   /* transform: translateX(-100%);
    transition: transform 300ms ease-in-out; */
}

.mobile-nav-open
{
    transform: translateX(0);
}

.mobile--nav--header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    margin-bottom: 40px;
}

#mobile--nav--item--active{
    color: #333;
}

.close-button button{
    border: none;
    background-color: transparent;
    font-size: 1.5rem;
    
}

.mobile--nav--item{
    text-decoration: none;
    font-size: 1.2rem;
    color: #bdbdbd;
    display: block;
    margin-bottom: 24px;
}

@media only screen and (max-width:660px)
{
    main{
        display: block;
    }

    header .logo{
        display: none;
    }

    .navigation{
        display: none;
    }

    .mobile-nav{
        display: block;
    }

    .menu-button{
        display: block;
    }
    
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />

    <script
      src="https://kit.fontawesome.com/84d2ebe131.js"
      crossorigin="anonymous"
    ></script>

    <title>Home Page</title>
  </head>
  
    <div  id="mobile-nav">
      <div >
        <img src="/img/Collab..png" alt="logo of the page"  />

        <div  onclick="toggleMobileNavigation()">
          <button><i ></i></button>
        </div>
      </div>

      <a href="#"  id="mobile--nav--item--active">Home</a>
      <a href="#" >About</a>
      <a href="#" >Services</a>
      <a href="#" >Contact</a>
    </div>

    <div >
      <header>
        <img src="/img/Collab..png" alt="logo of the page"  />

        <nav >
          <a href="#" >Home</a>
          <a href="#" >About</a>
          <a href="#" >Services</a>
          <a href="#" >Contact</a>
        </nav>
        <div  onclick="toggleMobileNavigation()">
          <button><i ></i></button>
        </div>
        <button >Get Started</button>
      </header>

      <main>
        <div >
          <h1 >Lorem ipsum <br />dolor sit.</h1>
          <p >
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi
            soluta officiis quae repellat excepturi iure optio consectetur iste
            fuga voluptas.
          </p>
          <button >
            <i ></i>Discover Video
          </button>
        </div>

        <div >
          <img src="/img/data-x1.png" alt="people illustration" />
        </div>
      </main>

      <footer>
        <div >
          <a href="" >
            <i ></i
          ></a>
          <a href="" >
            <i ></i
          ></a>
          <a href="" >
            <i ></i
          ></a>
        </div>

        <span>John Cena</span>
      </footer>
    </div>
<!--     
    <script>
        function toggleMobileNavigation()
        {
            var element = document.getElementById("mobile-nav");

            if (element.classList.contains("mobile-nav-open"))
            {
                element.classList.remove("mobile-nav-open");
            }
            else
            {
                element.classList.add("mobile-nav-open");
            }
        }
    </script>
-->

  </body>
</html>

CodePudding user response：

You need to set the width to 100vw I think there was a typo, where you set the viewport height for width, also the child div inherits the width of the parent, finally padding-right is added to make the button visible on screen!

function toggleMobileNavigation()
        {
            var element = document.getElementById("mobile-nav");

            if (element.classList.contains("mobile-nav-open"))
            {
                element.classList.remove("mobile-nav-open");
            }
            else
            {
                element.classList.add("mobile-nav-open");
            }
        }

@import url("https://fonts.googleapis.com/css2?family=Figtree&display=swap");
* {
  box-sizing: border-box;
  font: inherit;
  color: inherit;
}

body {
  font-family: "Figtree", sans-serif;
  padding: 0;
  margin: 0;

  color: #333;
}

p {
  max-width: 600;
}

.container {
  max-width: 1200px;
  padding: 24px;
  margin: 0 auto;

  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

header {
  display: flex;
  align-items: center;
}

.navigation {
  flex-grow: 1;
  margin-left: 40px;
}

.nav--item {
  text-decoration: none;
  color: #887c7c;
  margin-left: 24px;
}

.nav--item:first-child {
  margin-left: 0;
}

.nav--item--active {
  color: #333;
}

.nav--button {
  border: none;
  background: linear-gradient(
    to right top,
    #8c1587,
    #bb0073,
    #da1658,
    #ea453a,
    #eb6f12
  );
  padding: 10px 36px;
  border-radius: 50px;
  color: white;
}

main {
  display: flex;
  align-items: center;
}
.headline {
  font-size: 52px;
  font-weight: bolder;
  padding: 0;
  margin: 0;
}

.description {
  color: #585454;
  margin: 0;
  padding: 0;
  margin: 24px 0 40px 0;
}

.play-button {
  border: 1px solid #cda6da;
  border-radius: 50px;
  padding: 10px 36px;
  background: transparent;

  display: flex;
  align-items: center;

  background: linear-gradient(to right, #cf17c9 0%, #cf1512 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.play-button .fa-solid{
    background: inherit;
    font-size: 1.20rem;
    margin-right: 6px;
}

.main--content {
  flex: 1;
  margin: 40px 0 40px 0;
}

.main--img {
  flex: 1;
}

.main--img img{
    width: 100%;
}

footer{
    display: flex;
    color: #bdbdbd;

}

.socials{
    margin-right: 40px;
    
}

.socials--items{
    margin-right: 12px;
}

.socials--items:hover{
    color: #333;
}

.menu-button
{
    flex-grow: 1;
    display: none;
}

.menu-button button{
    border: none;
    background-color: transparent;
    font-size: 1.5rem;
}

.mobile-nav .close-button {
position: absolute;
top:0;
right: 10px;
}

.mobile-nav{
    position: fixed;
    width: 100vw; /* <- changed */
    height: 100vh;
    background-color: white;
    padding: 24px;
    display: none;
    position: relative;

   /* transform: translateX(-100%);
    transition: transform 300ms ease-in-out; */
}

.mobile-nav-open
{
    transform: translateX(0);
}

.mobile--nav--header{
width:100%;
    display: flex;
    align-items: center;
    justify-content: space-between; /* <- changed */
    position: relative;
    width: 100%; /* <- changed */
    padding-right: 20px; /* <- changed */
    margin-bottom: 40px;
}

#mobile--nav--item--active{
    color: #333;
}

.close-button button{
    border: none;
    background-color: transparent;
    font-size: 1.5rem;
    
}

.mobile--nav--item{
    text-decoration: none;
    font-size: 1.2rem;
    color: #bdbdbd;
    display: block;
    margin-bottom: 24px;
}

@media only screen and (max-width:660px)
{
    main{
        display: block;
    }

    header .logo{
        display: none;
    }

    .navigation{
        display: none;
    }

    .mobile-nav{
        display: block;
    }

    .menu-button{
        display: block;
    }
    
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />

    <script
      src="https://kit.fontawesome.com/84d2ebe131.js"
      crossorigin="anonymous"
    ></script>

    <title>Home Page</title>
  </head>
  
    <div  id="mobile-nav">
      <div >
        <img src="/img/Collab..png" alt="logo of the page"  />

        <div  onclick="toggleMobileNavigation()">
          <button><i ></i></button>
        </div>
      </div>

      <a href="#"  id="mobile--nav--item--active">Home</a>
      <a href="#" >About</a>
      <a href="#" >Services</a>
      <a href="#" >Contact</a>
    </div>

    <div >
      <header>
        <img src="/img/Collab..png" alt="logo of the page"  />

        <nav >
          <a href="#" >Home</a>
          <a href="#" >About</a>
          <a href="#" >Services</a>
          <a href="#" >Contact</a>
        </nav>
        <div  onclick="toggleMobileNavigation()">
          <button><i ></i></button>
        </div>
        <button >Get Started</button>
      </header>

      <main>
        <div >
          <h1 >Lorem ipsum <br />dolor sit.</h1>
          <p >
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi
            soluta officiis quae repellat excepturi iure optio consectetur iste
            fuga voluptas.
          </p>
          <button >
            <i ></i>Discover Video
          </button>
        </div>

        <div >
          <img src="/img/data-x1.png" alt="people illustration" />
        </div>
      </main>

      <footer>
        <div >
          <a href="" >
            <i ></i
          ></a>
          <a href="" >
            <i ></i
          ></a>
          <a href="" >
            <i ></i
          ></a>
        </div>

        <span>John Cena</span>
      </footer>
    </div>
  </body>
</html>