'Popup menu messes up page margins

I'm designing a webpage for a local business. The problem I face is that the popup menu that I created keeps being placed outside the margins of the page. If you click on the last item from the top bar, a menu pops up but not within the margins of the page. The code is below so you can reproduce the problem exactly:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
}

#SLIDE_BG {
  width: 100%;
  height: 100vh;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  animation: slideBg 24s linear infinite 3s;
  animation-timing-function: ease-in-out;
  background-image: url('096.jpg');
}

@keyframes slideBg {
  0% {
    background-image: url('096.jpg');
  }
  12.5% {
    background-image: url('227.jpg');
  }
  25% {
    background-image: url('1436.jpg');
  }
  37.5% {
    background-image: url('2158.jpg');
  }
  50% {
    background-image: url('2250.jpg');
  }
  62.5% {
    background-image: url('096.jpg');
  }
  75% {
    background-image: url('227.jpg');
  }
  87.5% {
    background-image: url('1436.jpg');
  }
}

#background {
  background-color: black;
  height: auto;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  opacity: 0.8;
}

#menu {
  position: relative;
  float: right;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#menu li {
  float: left;
}

#menu ul {
  list-style-type: none;
}

#menu a {
  color: white;
  padding: 16px;
  text-align: center;
  min-width: 200px;
  border-style: none;
  text-decoration: none;
  display: inline-block;
  font-family: 'Roboto Slab', serif;
  font-size: larger;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#menu a:hover {
  background-color: rgb(204, 198, 198);
}

#social-media-wrapper {
  top: 60px;
  position: relative;
  display: none;
}

#social-media-container {
  position: absolute;
  font-size: 30px;
  text-align: center;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#social-media-container p {
  text-decoration: none;
  color: rgb(255, 255, 255);
  margin-top: 15px;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#social-media-container p:hover {
  opacity: 0.7;
}

#phone-number {
  align-self: center;
  text-align: center;
  vertical-align: middle;
  display: flex;
  flex-direction: column;
  line-height: 30px;
  color: white;
  font-family: 'Roboto Slab', serif;
  font-size: 18px;
}

#phone-number span {
  margin-top: 40px;
}

#phone-number a {
  text-decoration: none;
  color: white;
  font-family: 'Roboto Slab', serif;
  font-size: 18px;
}

#logo-wrapper {
  width: 200px;
  height: 55px;
  overflow: hidden;
  z-index: 2;
  float: left;
}

#logo-image {
  width: 100%;
  height: auto;
  margin: -42px 0 0 -18px;
}

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

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600&display=swap" rel="stylesheet">
  <meta charset="UTF-8">
  <meta name="description" content="">
  <link rel="stylesheet" href="mystyle.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>

  <div id="SLIDE_BG">

  </div>

  <div id="wrapper">

    <div id="background">

      <div id="menu">
        <ul>
          <li><a href="#">Αρχική</a></li>
          <li><a href="#">Γάμος</a></li>
          <li><a href="#">Βάπτιση</a></li>
          <li><a href="#">Καλλιτεχνική</a></li>
          <li><a href="#">Βίντεο Κλιπ</a></li>
          <li><a href="#" id="social">Επικοινωνία</a></li>
        </ul>
      </div>

      <script>
        $(document).ready(function() {
          $("#social").click(function() {
            $("#social-media-wrapper").toggle(3000);
          });
        });
      </script>

      <div id="logo-wrapper">

        <div id="logo-area">

          <img src="logo.jpg" id="logo-image">

        </div>

      </div>

    </div>

  </div>

  <div id="social-media-wrapper">

    <ul id="social-media-container">

      <li>
        <a href="https://www.instagram.com/efraimidis_photography/">
          <p class="fa fa-instagram fa-fw"></p>
        </a>&nbsp;&nbsp;</li>
      <li>
        <a href="https://www.facebook.com/%CE%95%CF%85%CF%86%CF%81%CE%B1%CE%B9%CE%BC%CE%AF%CE%B4%CE%B7%CF%82-photography-2116065648685396">
          <p class="fa fa-facebook fa-fw"></p>
        </a>&nbsp;&nbsp;</li>
      <li>
        <a href="mailto:[email protected]">
          <p class="fa fa-envelope fa-fw"></p>
        </a>
      </li>

      <li id="phone-number">

        <span>Τηλέφωνο:&nbsp;<a href="tel:2321553290">2321553290</a></span>
        <span>Κινητό:&nbsp;<a href="tel:6996405521">6996405521</a></span>

      </li>

    </ul>

  </div>

</body>

</html>

html css

Solution 1:^[1]

Working code:

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

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600&display=swap" rel="stylesheet">
  <meta charset="UTF-8">
  <meta name="description" content="">
  <link rel="stylesheet" href="mystyle.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<script>
  $(document).ready(function () {
    $("#social").click(function () {
      $("#social-media-wrapper").toggle(3000);
    });
  });
</script>

<body>
  </div>
  <div id="wrapper">
    <div id="background">
      <div id="menu">
        <ul>
          <li><a href="#">??????</a></li>
          <li><a href="#">?????</a></li>
          <li><a href="#">???????</a></li>
          <li><a href="#">????????????</a></li>
          <li><a href="#">?????? ????</a></li>
          <li><a href="#" id="social">???????????</a></li>
        </ul>
      </div>
      <div id="logo-wrapper">
        <div id="logo-area">
          <img src="logo.jpg" id="logo-image">
        </div>
      </div>
    </div>
  </div>
  <div id="content">
    <div id="SLIDE_BG"></div>
    <div id="social-media-wrapper">
      <ul id="social-media-container">
        <li><a href="https://www.instagram.com/efraimidis_photography/">
            <p class="fa fa-instagram fa-fw"></p>
          </a>&nbsp;&nbsp;</li>
        <li><a
            href="https://www.facebook.com/%CE%95%CF%85%CF%86%CF%81%CE%B1%CE%B9%CE%BC%CE%AF%CE%B4%CE%B7%CF%82-photography-2116065648685396">
            <p class="fa fa-facebook fa-fw"></p>
          </a>&nbsp;&nbsp;</li>
        <li><a href="mailto:[email protected]">
            <p class="fa fa-envelope fa-fw"></p>
          </a></li>
        <li id="phone-number">
          <span>????????:&nbsp;<a href="tel:2321553290">2321553290</a></span>
          <span>??????:&nbsp;<a href="tel:6996405521">6996405521</a></span>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  #content {
    display: flex;
    flex-direction: row;
  }


  #SLIDE_BG {
    width: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    backface-visibility: hidden;
    animation: slideBg 24s linear infinite 3s;
    animation-timing-function: ease-in-out;
    background-image: url('096.jpg');
  }

  @keyframes slideBg {
    0% {
      background-image: url('096.jpg');
    }

    12.5% {
      background-image: url('227.jpg');
    }

    25% {
      background-image: url('1436.jpg');
    }

    37.5% {
      background-image: url('2158.jpg');
    }

    50% {
      background-image: url('2250.jpg');
    }

    62.5% {
      background-image: url('096.jpg');
    }

    75% {
      background-image: url('227.jpg');
    }

    87.5% {
      background-image: url('1436.jpg');
    }
  }

  #background {
    background-color: black;
    height: auto;
    width: 100%;
    z-index: 1;
    top: 0;
    left: 0;
    overflow-x: hidden;
    opacity: 0.8;
    display: flex;
    justify-content: flex-end;
  }

  #menu {
    position: relative;
    float: right;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  }

  #menu li {
    float: left;
  }

  #menu ul {
    list-style-type: none;
  }

  #menu a {
    color: white;
    padding: 16px;
    text-align: center;
    min-width: 200px;
    border-style: none;
    text-decoration: none;
    display: inline-block;
    font-family: 'Roboto Slab', serif;
    font-size: larger;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  }


  #menu a:hover {
    background-color: rgb(204, 198, 198);
  }

  #social-media-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }

  #social-media-container {
    font-size: 30px;
    text-align: center;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  #social-media-container p {
    text-decoration: none;
    color: rgb(255, 255, 255);
    margin-top: 15px;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  }

  #social-media-container p:hover {
    opacity: 0.7;
  }

  #phone-number {
    align-self: center;
    text-align: center;
    vertical-align: middle;
    display: flex;
    flex-direction: column;
    line-height: 30px;
    color: white;
    font-family: 'Roboto Slab', serif;
    font-size: 18px;
  }

  #phone-number span {
    margin-top: 40px;
  }

  #phone-number a {
    text-decoration: none;
    color: white;
    font-family: 'Roboto Slab', serif;
    font-size: 18px;
  }

  #logo-wrapper {
    width: 200px;
    height: 55px;
    overflow: hidden;
    z-index: 2;
    float: left;
  }

  #logo-image {
    width: 100%;
    height: auto;
    margin: -42px 0 0 -18px;
  }

Try to work more with flex boxes. Put your body in a flex box that has a vertical layout so theres the menu bar and then the actual content. Then in the content use a flex box that has a horizontal layout to let if flow from left to right.

Never use top to align an item to fit in a view (In this example 60 because your menu bar is 60px in height). Align your flex boxes so they are all nicely next to each other. Only use top, bottom, left, right if it's absolutely needed. These constraints are prone to mess up your layout.

Also it's not a good practice to give an element a height of 100% but then use top on it. It will always mess up the layout because it thinks the height is for example 1000px but you add a top of 30px to it so now it's 1030px and it will add a scrollbar.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	MaxCodes

'Popup menu messes up page margins

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]