Solving a div positioning issue - css

Question

I have a test site here:
http://www.hugoproject.com/test.html
I'm trying to put a second row of the book icons beneath the first, but whatever I try doesn't work. To clarify the situation, the following code makes a single book icon appear:
<div class="project">
Arrow<span></span>
</div>
When I have two sets of the code, two icons appear, when there are three sets of the code three icons appear. But if I have four or more sets of the code only three icons appear! I want for the extra sets of code to make icons beneath the first three.
Also at the moment when you resize the browser window this makes the top row of icons resize dynamically. I'd like to keep this feature and make both rows of icons fit on the one page such that there is no scroll bar.
Any ideas?
HTML
<div id="content">
<div id="home-projects-wrapper">
<h1 class="home">Hello! My name is Brandon</h1>
<div id="home-projects">
<div id="projects" class="circle">
<div class="project-group">
<div class="project">
Arrow<span></span>
</div>
<div class="project">
Arrow<span></span>
</div>
<div class="project">
Arrow<span></span>
</div>
<div class="project">
Arrow<span></span>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
#container {
transition: left .3s;
-moz-transition: left .3s;
-webkit-transition: left .3s;
position: absolute;
width: 100%;
height: 100%;
left: 0;
overflow-x: hidden;
}
#container.open {
left: 270px;
position: absolute;
width: 100%;
height: 100%;
transition: left .3s;
-moz-transition: left .3s;
-webkit-transition: left .3s;
overflow-x: hidden;
}
#content {
width: 80%;
max-width: 1170px;
margin: 7% auto;
position: relative;
font-size: 14px;
line-height: 22px;
color: #777777;
}
.page-template-page-templateshome-php #content {
width: auto;
margin: 0 auto;
position: static;
}
.single-post #content {
width: 60%;
}
#home-projects {
text-align: center;
overflow: hidden;
position: relative;
}
#projects {
width: 100%;
}
.project-group {
width: 100%;
height: 100%;
position: absolute;
}
.project {
float: left;
text-align: center;
width: 33.3%;
height:100%;
}
.project-link {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: #adadad;
position: relative;
overflow: hidden;
display: inline-block;
width: 80%;
}
.circle .project-link, .circle .project-link .hover {
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}
.project-link .hexagon-top {
content: '';
display: block;
position: absolute;
left: 0;
border-style: solid;
border-bottom-color: transparent;
border-left-color: #dfdfdf;
border-right-color: #dfdfdf;
width: 0;
height: 0;
z-index: 2;
}
.project-link .hexagon-bottom {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
border-style: solid;
border-top-color: transparent;
border-left-color: #dfdfdf;
border-right-color: #dfdfdf;
width: 0;
height: 0;
z-index: 2;
}
.project-link .hover {
position: absolute;
width: 100%;
height: 100%;
font-size: 14px;
text-align: center;
color: #fff;
background: #ec6136;
text-decoration: none;
text-transform: uppercase;
display: block;
opacity: 0;
transition: all .3s;
-moz-transition: all .3s;
-webkit-transitin: all .3s;
}
.project-link .hover-text {
display: block;
margin-top: 45%;
}
.project-link .hover-text:after {
content: '>';
font-family: 'icon';
font-size: 12px;
margin-left: 15px;
}
.project-link:hover > .hover {
opacity: .9;
}

Answer 1

If you want to continue with what you have now, just remove position:absolute from .project-group

Answer 2

You need to define a height for your blocks, i.e.
.project {
float: left;
text-align: center;
width: 33.3%;
height: 290px;
}
.HS {
display: inline-block;
position: relative;
text-indent: -9999px;
width: 100%;
height: 290px;
background-image: url("http://www.hugoproject.com/ftp1/images/icons.png");
background-position: 0px 0px;
background-size: 800%;
}
That will not completely solve your issue though. Maybe you want to use images inside the boxes instead of a background image/icon. You can also always calculate new dimensions with JavaScript/jQuery.

Answer 3

I would set up a div container for the books with a set width equal to the width of the books + margins.
Then set the book divs to "float: left;" and it should put 3 books per line.
If you want to keep the auto scaling you should do all this with percentages like you are currently doing.