Having trouble with the layout of my 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-


HTML-

<!DOCTYPE html>
<html>
  <head>
    <title>Instagram Shoutouts</title>
    <link rel="stylesheet" href="Instagrampage.css">
  </head>
  <body> 
    <header id="top" class="main-header">
      <h1>Instagram Shoutouts</h1>
	  <span class="title">Increase followers with instagram shoutouts!</span>
      
    </header>
	
</body>
</html>
 
		
		<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>
   <head>
   </head>




<head>
    <style>
    .product {
        margin-top: 20px;
    }
    td[class^="line"] {
        border: 1px solid black;  
        padding: 4px;
    }
    </style>
</head>
<body>
    <table class="product">
        <tr>
            <td colspan="4" class="product_name">igbodybuildingworld</td>
        </tr>
        <tr class="what_class_did_you_want_here">
            
            <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>
</body>

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;
}


#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?