Having trouble with the layout of my website

Language Help Make & Deploy a Website
1

Hello, I am new to HTML5 and CSS and wanted to try to make a simple website for practive. I want to make something similar to http://www.igshoutouts.com/ where I have a box for each Instagram page. So far I have managed to make the boxes but I am having trouble putting the text inside the boxes. As you can see from my code the igbodybuilding,media,followers,and following text and box are to the side and it should be in the first box under the image. How do i go about getting the text in the boxes? I have shown my code below-

<Below this line, add a link to the EXACT exercise that you are stuck at.>

<In what way does your code behave incorrectly? Include ALL error messages.>

```

HTML-

Instagram Shoutouts

Instagram Shoutouts

Increase followers with instagram shoutouts! 
</header>

	<div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
	<div class="box6"></div>
	<div class="box7"></div>
	<div class="box8"></div>
	<div class="box9"></div>
    
	 </div>


  
	</div><!-- End .secondary-content -->

<html>
.product { margin-top: 20px; } td[class^="line"] { border: 1px solid black; padding: 4px; } 
        <td class="line-right"><strong>106</strong><br/>media</td>
        <td class="line-left"><strong>32K</strong><br/>followers</td>
        <td class="line-left"><strong>605</strong><br/>following</td>
		
    </tr>
</table>

CSS
/* Base Styles -------------------- */

  • {
    box-sizing: border-box;
    }
    body {
    color: #878787;
    margin: 0;
    font: 1em/1.5 “Helvetica Neue”, Helvetica, Arial, sans-serif;
    }

h1 {
font-size: 5.625rem; /* 90px/16px */
font-family: serif;
color: rgba(255, 255, 255, 1);
text-transform: uppercase;
font-weight: bold;
line-height: 1.3;
}

img {
max-width: 100%
margin-bottom: 20px;
}

/* Pseudo-classes ------------------ */

a:link {
color: rgb(255, 169, 73);
text-decoration: none;
}

a:visited {
color: lightblue;
}

a:hover {
color: rgba(255, 169, 73, .4);
}

a:active {
color: lightcoral;
}

.flex-item {
color: black;
font-size: 14px;
font-weight: bold;
}

/* Main Styles --------------------- */

.main-header {
background-color: blue;
padding-top: 20px;
height: 300px;
box-sizing: border-box;
}

.title {
color: white;
font-size: 1.625rem; /* 26px/16px */
}

.intro {
font-size: 1.25em; /* 20px/16px */
line-height: 1.6;
}

.primary-content,
.main-header,
.main-footer {
text-align: center;
}

.primary-content {
padding-top: 25px;
padding-bottom: 95px;
}

.secondary-content {
padding-top: 80px;
padding-bottom: 70px;
border-bottom: 2px solid #dfe2e6;
}

.callout {
font-size: 1.25em;
border-bottom: 3px solid;
padding: 0 9px 3px;
margin-top: 20px;
display: inline-block;
}

.main-footer {
padding-top: 60px;
padding-bottom: 60px;
border-bottom: 10px solid #ffa949;
}

.t-border {
border-top: 2px solid #dfe2e6;
}

/* Layout Styles ------------------ */

.product{
background-repeat: no-repeat;
font-size: 18px;
text-align: center;

}

.primary-content,
.secondary-content {
width:10%;
box-sizing: border-;
padding-left: 10px;
padding-right: 50px;
margin: left-side;
max-width: 50px;
}

.box {

background: url(igbodybuildingworld2.jpg);
background-size: 150px;
background-repeat: no-repeat;
background-position:  top center;
float: left;
color: black;
font-weight: bold; 
font-size: 18px;
text-align: center;
line-height: 300px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 1px solid black;
height: 400px;

}

.box2 {
background: url(absmotivation1012.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}

.box3 {
background: url(instafitnesslifestyle1012.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}

.box4 {
background: url(absinspiration1012.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px

}
.box5 {
background: url(gymcomedy1012.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box6 {
background: url(instafitnesstransformations2.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box7 {
background: url(motivation2squat2.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box8 {
background: url(fitness_lifestyle202.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box9 {
background: url(gymlife222.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px;

.ad-left {

float: left;
}

<do not remove the three backticks above>
igbodybuildingworld
2

i put your code in a bin, might make it easier for anyone who wants to help you.

Take a look at this code, i wrapped your box into another div (and gave it a class wrapper), they way you can put text below the other box, is this sort of what you want? Now, you would have to implant this, but is this usable for you?