html css responsive-design responsive overlap

CSS responsive design overlapping body

The situation is: I'm learning on my own how to make websites. I already know some stuff and now I decided to create one website. But I have some struggle... I'm trying to make it responsive, ant it kinda works, but footer overlaps content in body when you resize the page...

The idea is to scroll down for the tags when they start to overlap..

I've googled for similar issue and checked threads, tried a lot of things, but still got nowhere :| Help?...

body{
  margin: 0px;
  font-family: 'Open Sans', sans-serif;

background-image: url(https://umad.com/img/2015/1/dark-geometric-wallpaper-176-205-hd-wallpapers.jpg);

}

/*+++NAVBAR*/
#primary_nav_wrap{
width: 100%;
background:#333;
  margin: 0;
float:left;

}

#primary_nav_wrap ul
{

  background-color: #333;
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0;
}

#primary_nav_wrap ul a
{
    display:block;
    color:#fff;
    text-decoration:none;
    font-weight:500;
    line-height:50px;

    padding:0 20px;
    font-family: 'Open Sans',"Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
    background:#4CAF50
}

#primary_nav_wrap ul li:hover
{
    background:#282828
}

#primary_nav_wrap ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#333;
    padding:0
}

#primary_nav_wrap ul ul li
{
    float:none;
    width:200px
}

#primary_nav_wrap ul ul a
{
    line-height:120%;
    padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
    top:0;
    left:100%
}

#primary_nav_wrap ul li:hover > ul
{
    display:block
}
/*---NAVBAR*/


.hometitle span{
  width: 100%;
}

.hometitle h1{
  font-size: 80px;
  color:#fff;
  text-align: center;
  clear: both;
  padding-top: 10%;
}

.hometitle h2{
  font-size: 36px;
  color:#fff;
  text-align: center;
  clear: both;
  margin-top: -60px;
}


/*+++TAGS*/
.tags {
  position: fixed;
  bottom: 10px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.item {
  -webkit-flex: 1 auto;
  flex: 1 auto;
  padding: 0.5rem;
  text-align: center;
}

.item a {
  display: block;
  background-color: #4CAF50;
  text-decoration: none;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  color: #fff;
}
/*---TAGS*/


.homecontainer {
    width: 100%;
    height: 20%;
    min-height: 400px;
}


#footer{

position: relative;
bottom: 0;
width: 100%;
height: 20%;


}

HTML

<!DOCTYPE html>

<html lang="en">
  <head>
      <title>Home</title>
          <meta name"viewport" content="width=device-width, initial scale=1">
          <meta charset="utf-8">
          <link rel="shortcut icon" href="/images/favicon.ico">
          <link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
          <link rel="stylesheet" href="/arturnmk/style.css">
    </head>

    <body>
      <div class="main">


<nav id="primary_nav_wrap">
<ul>

  <li class="current-menu-item"><a href="#">Home</a></li>
  <li><a href="portfolio.html">Menu</a>
    <ul>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Menu</a></li>
    </ul>
  <li><a href="projects.html">Menu</a></li>
  <li><a href="services.html">Menu</a>
    <ul>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">WutWut</a></li>

    </ul>
  </li>
  <li><a href="contacts.html">Menu</a></li>

</ul>
</nav>


<div class="homecontainer">


<div class="hometitle">

<span>
<h1>Firtname Lastname</h1>
</span>

<span>
<h2>Thing to say/state</h2>
</span>

</div>






          </div>










</div>




    </body>
    <footer>
      <div class="tags">
        <div class="item"><a href="#">TagTagTagTag</a></div>
        <div class="item"><a href="#">TagTagTag</a></div>
        <div class="item"><a href="#">TagTag</a></div>
        <div class="item"><a href="#">Tag</a></div>
        <div class="item"><a href="#">TagTagTagTag</a></div>
        <div class="item"><a href="#">TagTagTag</a></div>
        <div class="item"><a href="#">TagTagTag</a></div>
        <div class="item"><a href="#">TagTagTag</a></div>
        <div class="item"><a href="#">TagTagTag</a></div>
        <div class="item"><a href="#">TagTagTagTag</a></div>
        <div class="item"><a href="#">TagTag</a></div>
        <div class="item"><a href="#">TagTag</a></div>
        <div class="item"><a href="#">PTagTagTag</a></div>
        <div class="item"><a href="#">TagTagTagTagTagTag</a></div>
        <div class="item"><a href="#">TagTagTag</a></div>
        <div class="item"><a href="#">Tag16 Tag16 Tag16Tag16</a></div>
        <div class="item"><a href="#">Tag15Tag15</a></div>
        <div class="item"><a href="#">Tag14Tag14Tag14</a></div>
        <div class="item"><a href="#">Tag13</a></div>
        <div class="item"><a href="#">Tag12</a></div>
        <div class="item"><a href="#">Tag11</a></div>
        <div class="item"><a href="#">Tag10</a></div>
        <div class="item"><a href="#">Tag9</a></div>
        <div class="item"><a href="#">Tag8</a></div>
        <div class="item"><a href="#">Tag7</a></div>
        <div class="item"><a href="#">Tag6</a></div>
        <div class="item"><a href="#">Tag5</a></div>
        <div class="item"><a href="#">Tag4</a></div>
        <div class="item"><a href="#">Tag3</a></div>
        <div class="item"><a href="#">Tag2</a></div>
        <div class="item"><a href="#">Tag1</a></div>
      </div>
    </footer>

  </html>

Solution

1) You shouldn't have HTML code outside of the <body> tag for elements that are meant to be displayed on the page. Your footer should be contained inside the <body> tag. You can create a <div> to contain the elements which you now have in the body of the document.

2) To avoid the overlapping (considering that you want to keep your existing code structure and CSS) you can set a margin-bottom equal to the height of your footer to the container of your main content. This approach will work if your footer always has the same height.

3) If your footer needs to change in height, another simple solution (but with drawbacks) is to let the footer stick to the normal page flow, instead of absolutely positioning it to the bottom of the document, and to set a min-height to the container of your main content. The min-height should be set to ensure that your footer won't be positioned in the middle of the user's screen on pages that are short (that don't have a lot of content in them). The min-height on the main content's container will in this case create whitespace below the main content that will push the footer down.