Extra space in responsive css using float:left;

Question

For the life of me, I cannot figure out why this code can't work. I am trying to set up a personal website and before I put my content in place, I want to have all of the areas setup and have it be responsive. I want a 3x3 grid of boxes where I can display my work (div id = container), but every time I introduce the ninth div block specifically (p9), the arrangement breaks for seemingly no reason. Here's the code for the desktop layout:

body{
    background-color:#FFB51E;
    width:100%;
    height:1000px;
    position:absolute;
}

 /* unvisited link */
a:link {
    text-decoration:none;
    background-color: #2A56C4;
    color:#fff;
    padding:15px;
    border-radius:26px;
    }
/* visited link */
a:visited {
    color: fff;
    }
/* mouse over link */
a:hover {
    background-color:#FF581E;
    }
/* selected link */
a:active {
    color:#FF581E;
    background-color:fff;
    }

#header{
    width:80%;
    height:160px;
    margin: 0 auto;
    position:relative;
    display:block;

}

.left{
    color:#fff;
    text-align: left;
    margin-top:25px;
    margin-bottom:15px;
    font-size:36px;
    position:relative;
    float:left;
    width:310px;
    display:block;
}

.right{
    text-align:right;
    width:300px;
    float:right;
    padding-top:5px;
    margin-bottom:15px;
    font-size:24px;
    position:relative;
    float:right;
    z-index:2;
}

.works{
    text-align:center;
    position:relative;
    float:left;
    left:30%;
    font-size:25px;
    width:100px;
    display:inline-block;
}

.about{
    text-align:center;
    position:relative;
    float:right;
    right:30%;
    font-size:25px;
    width:100px;
    display:inline-block;
}

.border{
    background-color:none;
    width:100%;
    height:85px;
    margin:0 auto;
    border:none;
    border-bottom: 6px solid #000;
    float:none;
    position:relative;
}
/*body stuff*/
    #container{
    position:static;
    display:block;
    margin:0 auto;
    font-size:0px;
    margin-top: -10px;
    width:80%;
    height:550px;
}

    .p1{
        background-color: aliceblue;
        color:000;
        font-size:12px;
        width:230px;
        z-index: 1;
        float:left;
        margin: 0px;
        padding:0px;

    }

    .p2{
        background-color: red;
        width:230px;
        z-index: 1;
        float:left;
        padding:0px;
    }
    .p3{
        background-color: blue;
        width:230px;
        z-index: 1;
        float:left;
        padding:0px;
        margin:0px;
    }

    .p4{
        background-color: purple;
        width:230px;
        z-index: 1;
        float:left;
        margin-top: 20px;
        padding:0px;

    }

    .p5{
        background-color: green;
        width:230px;
        z-index: 1;
        float:left;
        margin-top: 20px;
        padding:0px;
    }
    .p6{
        background-color: brown;
        width:230px;
        z-index: 1;
        float:left;
        padding:0px;
        margin-top: 20px;
    }

    .p7{
        background-color: purple;
        width:230px;
        z-index: 1;
        float:left;
        margin-top: 20px;
        padding:0px;

    }

    .p8{
        background-color: green;
        width:230px;
        z-index: 1;
        float:left;
        margin-top: 20px;
        padding:0px;
    }
    .p9{
        background-color: green;
        width:230px;
        z-index: 1;
        float:left;
        margin-top: 20px;
        padding:0px;
    }

I'm about five minutes from drop kicking my laptop out the window, so any kind of help would be greatly appreciated! Let me know if you need code for the html as well.

Answer 1

Something to get you started. I don't have the HTML you use so I focused on the container. I defined it as a flexbox which makes it responsive. Each item has a width of 33% and a height of 30px (for demo purpose).

/*body stuff*/

#container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  margin-top: -10px;
  width: 80%;
}

[class^="p"] {
  width: 33%;
  height: 30px;
}

.p1 {
  background-color: aliceblue;
}

.p2 {
  background-color: red;
}

.p3 {
  background-color: blue;
}

.p4 {
  background-color: purple;
}

.p5 {
  background-color: green;
}

.p6 {
  background-color: brown;
}

.p7 {
  background-color: yellow;
}

.p8 {
  background-color: red;
}

.p9 {
  background-color: green;
}

<div id="container">
  <div class="p1"></div>
  <div class="p2"></div>
  <div class="p3"></div>
  <div class="p4"></div>
  <div class="p5"></div>
  <div class="p6"></div>
  <div class="p7"></div>
  <div class="p8"></div>
  <div class="p9"></div>
</div>