How to fix hamburger menu?

HTML-CSS
1

Hi, guys I added a hamburger menu to my portfolio but there’s an extra space to the right of the hamburger menu on mobile. I checked on my phone and Chrome Devtools but I’m not sure what the problem

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="keywords" content="HTML, CSS, JavaScript, Vue.js, PHP, Portfolio, Web Development">
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Portfolio</title>
  <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@700;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css" />
</head>

<body>
  <header>
    <nav>
      <ul>
        <li><a href="#bio">About</a></li>
        <li><a href="#project-section">Projects</a></li>
        <li><a href="#contact-me">Contact</a></li>
      </ul>
    </nav>
    <i id="hamburger-menu" class="fas fa-bars"></i>
    <div id="dropdown">
      <div id="exit">
        <i class="fas fa-times"></i>
      </div>
      <ul id="dropdown-list">
        <li><a href="#bio">About</a></li>
        <li><a href="#project-section">Projects</a></li>
        <li><a href="#contact-me">Contact</a></li>
      </ul>
    </div>
  </header>

  <section id="bio" class="bio">
    <div class="bio-details">
      <h1 class="bio-title">My Name</h1>
      <p>Front End Web Developer</p>
      <div><a class="gh-icon" href="#"><i class="fab fa-github"></i></a>
      </div>
    </div>
  </section>

  <section id="project-section" class="project-section">
    <h2 class="projects-title">Projects</h2>
    <div class="projects-container">

      <div class="project">
        <img src="/images/misha-pic.png" alt="misha blog picture">
        <h3 class="project-title">Misha's Blog</h3>
        <div class="links-container">
          <a class="demo-btn" href="https://mishapicks.netlify.app">Demo</a>
          <div><a class="gh-icon" href="#" class="projects"
              id="misha-blog"><i class="fab fa-github"></i></a></div>
        </div>
      </div>

      <div class="project">
        <img class="small-image" src="/images/frogger-pic.png" alt="frogger game recipe">
        <div class="project-content">
          <h3 class="project-title">Frogger Game</h3>
          <div class="links-container">
            <a class="demo-btn" href="https://frogger-plf.netlify.app">Demo</a>
            <div><a class="gh-icon" href="#" class="projects" id="frogger-game"><i
                  class="fab fa-github"></i></a></div>
          </div>
        </div>
      </div>

      <div class="project">
        <img src="/images/recipe-pic.png" alt="rezept app picture">
        <h3 class="project-title">Rezept App</h3>
        <div class="links-container">
          <a class="demo-btn" href="https://e28p3.lefthandedcat.me/">Demo</a>
          <div><a class="gh-icon" href="#" class="projects"
              id="recipes"><i class="fab fa-github"></i></a></div>
        </div>
      </div>

      <div class="project">
        <img src="/images/animal-game-pic.png" alt="animal game picture">
        <h3 class="project-title">Mystery Animal</h3>
        <div class="links-container">
          <a class="demo-btn" href="https://e2p3.lefthandedcat.me/">Demo</a>
          <div><a class="gh-icon" href="#" class="projects"
              id="guessing-game"><i class="fab fa-github"></i></a></div>
        </div>
      </div>

    </div>

  </section>

  <section id="contact-me" class="contact-me">
    <h2 class="contact-title">Contact</h2>
    <p class="contact-para">Questions or <br>feedback? Let me know!</p>
    <form name="contact" method="POST" data-netlify="true">
      <p id="name">
        <label><input placeholder="Name" type="text" name="name" required /></label>
      </p>
      <p>
        <label><input placeholder="Email" type="email" name="email" required /></label>
      </p>
      <p>
        <label><textarea placeholder="Type your message here..." name="message"></textarea></label>
      </p>
      <button type="submit">Send</button>
    </form>
  </section>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://kit.fontawesome.com/1707487087.js" crossorigin="anonymous"></script>
  <script src="js/app.js"></script>
</body>

</html>

CSS

*{
    box-sizing: border-box;
}
body{
  background-color: #E98074;
  color: #E85A4F;
  font-family: 'Mulish', sans-serif;
  text-align: center;
}

#bio{
    display: flex;
    justify-content: center;
    align-items: center;
}
.bio-title{
    font-size: 70px;
    text-align: center;
}

.contact-title,.projects-title{
    color:#FFFAFA;
}

.contact-para{
    color: #FFFAFA;
    font-size:25px;
    margin-top: -10px;
}

ul{
    display: flex;
}

li{
    list-style: none;
    font-size: 25px;
}

a{
    text-decoration: none;
    color: #FFFAFA;
}

  section{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height:100vh;
}

h1{
    color: #FFFAFA
}

h2{
    font-size: 60px;
    text-align: center;
}


p{
    text-align: center;
    font-size: 25px;
    color: #FFFAFA;
}

.projects-container{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.project{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1%;
    background-color: #E85A4F;
    font-size:35px;
    color: #FFFAFA;
    width: 50%;
    border-radius: 15px;
}

img{
 height: 100%;
 width: 100%;
 border-radius: 15px 15px 0 0;
}


.links-container{
    display: flex;
    justify-content: center;
    align-items: center; 
    margin-top: -40px;
}

.links-container > div{
    margin-left: 30px;
}

.demo-btn{
    color: #E85A4F;
    font-size: 25px;
    padding: 2px;
    background-color:#FFFAFA;
    border-radius: 25px;
    padding: 5px;
}

.project-title{
   margin-top: 5px;
}


form{
    width:500px;
    height:500px;
    text-align: center;
}

#name{
    margin-top: 5%;
    margin-bottom: 10%;
}


input[type=text],input[type=email]{
    margin: 0 auto;
    width:250px;
    font-size:20px;
    border: 1px solid #336699;
    height:40px;
    border-style: groove;
}

textarea{
    width:300px;
    height: 200px;
    margin-top: 20px;
    font-size:20px;
    resize: none;
    border-style: groove;
}

button{
    padding: 10px;
    width: 200px;
    border:none;
    background-color:#FFFAFA;
    color: #E85A4F;
    font-size: 20px;
    border-radius: 15px;
}

.gh-icon{
    font-size: 45px;
    color: #FFFAFA;
}

nav{
    display: none;
}

#hamburger-menu{
    font-size: 35px;
    color: #FFFAFA;
    float: right;
}

#dropdown-list{
    margin-top: 55px;
    display: none;
}

#dropdown-list > li{
    font-size: 35px;
    line-height: 100px;
}

#exit{
    margin-top: -35px;
    font-size: 35px;
    color:  #FFFAFA;
    display: none;
    float: right;
}


@media only screen and (min-width: 768px) {
    .project{
        width: 20%;
    }
    
    input[type=text],input[type=email]{
        width:400px;
        height:40px;
    }
    
    textarea{
        width:400px;
        height: 200px;
    }

    nav{
        display: block;
    }

    #dropdown{
        display: none;
    }

    #hamburger-menu{
        display: none;
    }

    header{
        display: flex;
        justify-content: flex-end;
        position:fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #E98074;
    }

    li{
        margin-right: 15px;
    }
}

@media only screen and (min-width: 1169px) {
    .project{
        width: 25%;
    }

    input[type=text],input[type=email]{
        width:500px;
        height:40px;
    }
    
    textarea{
        width:500px;
        height: 200px;
    }
}

@media only screen and (min-width: 1300px) {
    .project{
        width: 20%;
        font-size:27px;
    }

    .links-container{
        margin-top: -20px;
    }
}
2

Chrome puts 8px margin all the around the body to keep content off the edge of the window. That’s all the space I see.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.