Making square boxes in html and css - html

Question

I have created a webpage (at present it will work in desktop mode only) by seeing an image.
At this moment, I am able to create nearly 40-50% of the webpage but I am not sure how to create 6 square boxes (ADDITIONAL SPORT, COLLEGIATE, INDIVIDUAL, PROFESSIONAL, ENTERTAINMENT, COMMERCIAL) beneath the background image(where the guy is standing). I have included all my CSS and HTML codes in the fiddle. I tried creating boxes but automatically it is going over the top of an image(not sure why).
I tried putting the following set of codes beneath the nav section but unfortunately it didn't work.
<div class="squares">
<p class="square1">ADDITIONAL SPORT</p>
<p class="square2">COLLEGIATE</p>
<p class="square3">INDIVIDUAL</p>
<p class="square4">PROFESSIONAL</p>
<p class="square5">Additional Sport</p>
<p class="square6">Additional Sport</p>
</div>
Let me know what I am doing wrong.

Answer 1

Try this:
<div class="squaresRow">
<div class="square">ADDITIONAL SPORT</div>
<div class="square">COLLEGIATE</div>
<div class="square">INDIVIDUAL</div>
</div>
<div class="squaresRow">
<div class="square">PROFESSIONAL</div>
<div class="square">Additional Sport</div>
<div class="square">Additional Sport</div>
</div>
<style>
.squaresRow {
width: 100%;
}
.square {
width: 33%;
display: inline-block;
text-align: center;
}
/* adds a margin between the two rows */
.squaresRow:first-child > .square {
margin-bottom: 2%;
}
</style>

Answer 2

If you look at the results in "Full Page" view you can see two rows of squares. Note: you may view this revision here as well. (The code also corrects some minor HTML and CSS errors, too.) I added a red border around the squares just for emphasis and it may certainly be removed in finalizing this page.
* {
padding: 0;
margin: 0;
}
.header {
position: relative;
}
.header-background {
position:relative;
width: 100%;
}
.header-title {
position: absolute;
top: 0px;
left: 120px;
}
#font-face {
font-family: AvantGarde;
src: url(AvantGarde.woff);
}
h1 {
text-align: center;
font-size: 25px;
font-family: "AvantGarde Demi";
letter-spacing: .24em;
color: rgb(255, 255, 255);
position: absolute;
top: 18vh;
left: 160px;
width:100%;
}
p {
font: 27px "Adelle PE";
padding-left: 200px;
text-align: center;
padding-right: 210px;
line-height: 1.236;
letter-spacing: .12em;
-moz-transform: matrix( 0.79000470431452, 0, 0, 0.79518533499854, 0, 0);
-webkit-transform: matrix( 0.79000470431452, 0, 0, 0.79518533499854, 0, 0);
-ms-transform: matrix( 0.79000470431452, 0, 0, 0.79518533499854, 0, 0);
color: rgb(255, 255, 255);
position: absolute;
top:24vh;
left:0;
width:100%;
}
.nav {
position: absolute;
width: 155px;
top: 0px;
bottom: 0px;
left: 0px;
border-style: solid;
border-right-color: #ff0000;
background-color: #030303;
opacity: 0.5;
height: 1157px;
}
.navbar-logo {
position: relative;
width: 155px;
}
.navbar-tags {
padding: 0;
list-style-type: none;
}
.navbar-icons {
display: inline;
}
.squares {
position:absolute;
left:32vw;
bottom: 0vh;
height:400px;
width: 600px;
border: 1px solid red;
}
.square {
position: absolute;
left:0;
margin:0;padding:0;
background-color: #ccc;
width: 200px;
height:200px;
border: 1px solid black;
}
.square1 {
position:absolute;
top:0;
left:0;
}
.square2 {
posiiton:absolute;
top:0;
left: 200px;
}
.square3 {
posiiton:absolute;
top:0;
left:400px;
}
.square4 {
position:absolute;
bottom:0;
left:0;
}
.square5 {
position:absolute;
bottom:0;
left: 200px;
}
.square6 {
position:absolute;
bottom:0;
left:400px;
}
.login {
display: inline;
padding-left: 10px;
}
<div class="header">
<img class="header-background" src="https://s17.postimg.org/5590nqkyn/dna-image.png">
<img class="header-title" src="https://s12.postimg.org/5vqt7imb1/northman-wordmark.png" width="400" height="157">
<h1>OUR DNA</h1>
<p>Northman was established to provide radically-evolved insurance solutions for the adventure and extreme sport markets. Northman is changing the extreme insurance playing field.</p>
</div>
<div class="nav">
<img class="navbar-logo" src="https://s12.postimg.org/p1g2nywql/northman-logo.png">
<ul class="navbar-list">
<li class="navbar-tags">OUR DNA</li>
<li class="navbar-tags">PROGRAMS</li>
<li class="navbar-tags">RESEARCH/li>
<li class="navbar-tags">STORIES</li>
<li class="navbar-icons"><i class="fa fa-facebook-square"></i></li>
<li class="navbar-icons"><i class="fa fa-twitter-square"></i></li>
</ul>
<div class="squares">
<p class="square square1">ADDITIONAL SPORT</p>
<p class="square square2">COLLEGIATE</p>
<p class="square square3">INDIVIDUAL</p>
<p class="square square4">PROFESSIONAL</p>
<p class="square square5">Additional Sport</p>
<p class="square square6">Additional Sport</p>
</div>
<a class="login" href="#">Log In</a>
<a class="login" href="#">Sign Up</a>
</div>
Also, see excellent related discussion here

Answer 3

If you are using a CSS framework like Bootstrap or a CSS tool like Flex-box, doing something like would be very easy. Try looking into these tools.
But just using raw CSS and html. try.
First, add a class to your squares so that you can target all square divs
.squares {
position: aboslute;
width: 300px;
}
.square {
text-align: center;
margin: 0px;
background-color: red;
width:100px;
height:100px;
float: left;
}
<div class="squares">
<p class="square square1">ADDITIONAL SPORT</p>
<p class="square square2">COLLEGIATE</p>
<p class="square square3">INDIVIDUAL</p>
<p class="square square4">PROFESSIONAL</p>
<p class="square square5">Additional Sport</p>
<p class="square square6">Additional Sport</p>
</div>