Hi,
I am having a huge problem centering my HTML gallery images in a div. All my images are pushed all the way to the left. I’m going crazy…please help. I am also using masonry.js with this, as well. Also, I am just starting to learn web design…so I am sure I messed up this code pretty bad.
<div class="container main">
<div class="row">
<div class="three columns portfolio"><a href="images/alex_gallery_blk.jpg" data-keywords= "Hair and MakeUp"> <img src="images/alex_gallery_blk_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/viva_gallery.jpg" data-keywords= "Hair and MakeUp"> <img src="images/viva_gallery_thumb1.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/alex_gallery.jpg" data-keywords= "Hair and MakeUp"> <img src="images/alex_gallery_thumb.jpg"/></a>
</div>
</div>
<div class="row">
<div class="three columns portfolio"><a href="images/bex_gallery.jpg" data-keywords= "Hair and MakeUp"> <img src="images/bex_gallery_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/gallery_huntress.jpg" data-keywords= "Hair and MakeUp"> <img src="images/gallery_huntress_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/angelica_best.jpg" data-keywords= "Hair and MakeUp"> <img src="images/angelica_best_thumb.jpg"/></a>
</div>
</div>
<div class="row">
<div class="three columns portfolio"><a href="images/angelica_glitter.jpg" data-keywords= "Hair and MakeUp"> <img src="images/angelica_glitter_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/viva_pan_updo.jpg" data-keywords= "Hair"> <img src="images/viva_pan_updo_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/bella_flowers.jpg" data-keywords= "Hair and MakeUp"> <img src="images/bella_flowers_thumb.jpg"/></a>
</div>
</div>
<div class="row">
<div class="three columns portfolio"><a href="images/bex_blue_dress.jpg" data-keywords= "Hair and MakeUp"> <img src="images/bex_blue_dress_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/angelica_garden.jpg" data-keywords= "Hair and MakeUp"> <img src="images/angelica_garden_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/bex_veil.jpg" data-keywords= "Hair and MakeUp"> <img src="images/bex_veil_thumb.jpg"/></a>
</div>
</div>
<div class="row">
<div class="three columns portfolio"><a href="images/viva_pan_closeup.jpg" data-keywords= "Hair"> <img src="images/viva_pan_closeup_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/blonde_curls.jpg" data-keywords= "Hair and MakeUp"> <img src="images/blonde_curls_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/pandora_latex.jpg" data-keywords= "Hair and MakeUp"> <img src="images/pandora_latex_thumb.jpg"/></a>
</div>
</div>
<div class="row">
<div class="three columns portfolio"><a href="images/victoria_light.jpg" data-keywords= "Hair and MakeUp"> <img src="images/victoria_light_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/purple_pandora.jpg" data-keywords= "Hair and MakeUp"> <img src="images/purple_pandora_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/angelica_blue.jpg" data-keywords= "Hair and MakeUp"> <img src="images/angelica_blue_thumb.jpg"/></a>
</div>
</div>
<div class="row">
<div class="three columns portfolio"><a href="images/blue_lookbook.jpg" data-keywords= "Hair and MakeUp"> <img src="images/blue_lookbook_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/fashion_show.jpg" data-keywords= "Hair and MakeUp"> <img src="images/fashion_show_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/angelica_beauty.jpg" data-keywords= "Hair and MakeUp"> <img src="images/angelica_beauty_thumb.jpg"/></a>
</div>
</div>
<div class="row">
<div class="three columns portfolio"><a href="images/girl_about_town.JPG" data-keywords= "Hair and MakeUp"> <img src="images/girl_about_town_thumb.JPG"/></a>
</div>
<div class="three columns portfolio"><a href="images/sasha_harry_shoot.jpg" data-keywords= "Hair and MakeUp"> <img src="images/sasha_harry_shoot_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/jake_saunders.jpg" data-keywords= "Hair and MakeUp"> <img src="images/jake_saunders_thumb.jpg"/></a>
</div>
</div>
<div class="row">
<div class="three columns portfolio"><a href="images/victoria_soft.jpg" data-keywords= "Hair and MakeUp"> <img src="images/victoria_soft_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/angelica_natural.jpg" data-keywords= "Hair and MakeUp"> <img src="images/angelica_natural_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href ="images/linkedin_staff.jpg" data-keywords= "MakeUp"> <img src="images/linkedin_staff_thumb.jpg"/></a>
</div>
</div>
<div class="row">
<div class="three columns portfolio"><a href="images/linkedin_jumping.jpg" data-keywords= "MakeUp"> <img src="images/linkedin_jumping_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/Jess_wordville.jpg" data-keywords= "Hair and MakeUp"> <img src="images/Jess_wordville_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/linkedin_girls.jpg" data-keywords= " MakeUp"> <img src="images/linkedin_girls_thumb.jpg"/></a>
</div>
</div>
<div class="row">
<div class="three columns portfolio"><a href="images/linkedin_young_red.jpg" data-keywords= " MakeUp"> <img src="images/linkedin_young_red_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/lookbook.jpg" data-keywords= "Hair and MakeUp"> <img src="images/lookbook_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/salina_red_room.jpg" data-keywords= "Hair and MakeUp"> <img src="images/salina_red_room_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/polly_wordville.jpg" data-keywords= "Hair and MakeUp"> <img src="images/polly_wordville_thumb.jpg"/></a>
</div>
</div>
<div class="row">
<div class="three columns portfolio"><a href="images/salina_steps.jpg" data-keywords= "Hair and MakeUp"> <img src="images/salina_steps_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/zeetv.jpg" data-keywords= "Hair and MakeUp"> <img src="images/zeetv_thumb.jpg"/></a>
</div>
<div class="three columns portfolio">
<a href="images/pema_wordville.jpg" data-keywords= "Hair and MakeUp"> <img src="images/pema_wordville_thumb.jpg"/></a>
</div>
</div>
<div class="row">
<div class="three columns portfolio"><a href="images/wordville_staff.jpg" data-keywords= "Hair and MakeUp"> <img src="images/wordville_staff_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/salina_flowers.jpg" data-keywords= "Hair and MakeUp"> <img src="images/salina_flowers_thumb.jpg"/></a>
</div>
</div>
<div class="row">
<div class="three columns portfolio"><a href="images/saph_shoot.jpg" data-keywords= "Hair and MakeUp"> <img src="images/saph_shoot_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/sasha_fashion_show.jpg" data-keywords= "Hair and MakeUp"> <img src="images/sasha_fashion_show_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/viva_pan_standing.jpg" data-keywords= "Hair"> <img src="images/viva_pan_standing_thumb.jpg"/></a>
</div>
</div>
<div class="row">
<div class="three columns portfolio"><a href="images/moody.jpg" data-keywords= "Hair and MakeUp"> <img src="images/moody_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/blue_pandora.jpg" data-keywords= "Hair and MakeUp"> <img src="images/blue_pandora_thumb.jpg"/></a>
</div>
<div class="three columns portfolio"><a href="images/s_remastered.jpg" data-keywords= " MakeUp"> <img src="images/s_remastered_thumb.jpg"/></a>
</div>
</div>
</div><!--container-->
<footer>
<div class="twelve columns">
<div class="row social">
<ul class="social">
<li class="facebook"><a href="#"><i class="fa fa-facebook-square fa-lg"></i></a></li>
<li class="twitter"><a href="#"><i class="fa fa-twitter-square fa-lg"></i></a></li>
<li class="instagram"><a href="#"><i class="fa fa-instagram fa-lg"></i></a></li>
<li class="linkedin"><a href="#"><i class="fa fa-linkedin-square fa-lg"></i></a></li>
</ul>
</div>
<div class="row twelve columns"></div>
<p>©2015 . All Rights Reserved.</p>
</div>
</footer>
</body>
</html>
CSS
/* Table of Contents
––––––––––––––––––––––––––––––––––––––––––––––
- General Content
- Typography
- Header & Navigation
- Images & Media
- Footer
- Media Queries
–––––––––––––––––––––––––––––––––––––––––––––– */
/* General Content
–––––––––––––––––––––––––––––––––––––––––––––– */
.main.portfolio{
margin:0;
}
/* Typography
---------------------------------------------- */
/* Header & Navigation
---------------------------------------------- */
header.main_nav{
padding: 1% 0;
display:block;
}
/* Images & Media
---------------------------------------------- */
img{
max-width: 100%;
}
.portfolio {
margin: auto ;
padding:.2em .2em;
}
img:hover{
opacity:0.8;
}
/* Footer
----------------------------------------------- */
ul.social{
display: block;
margin: 5% 0;
list-style-type: none;
text-align: center;
}
ul.social li{
font-size: 2em;
display: inline;
padding: 0 2%;
}
ul.social li a{
color: #666;
}
ul.social li.facebook a:hover{color: rgb(59,89,152);}
ul.social li.twitter a:hover{color: rgb(0,172,237);}
ul.social li.instagram a:hover{color: rgb(81,127,237);}
ul.social li.linkedin a:hover{color: rgb(0, 123,182);}
p.copyright{
text-align: center;
color: #666;
font-size: 1em;
}
/* Media Queries
------------------------------------------------ */