Stuck trying to create a custom 3 column portfolio page

Question

Hi, I was trying to build a portfolio page in my cooking recipe homepage, where I will have 2 columns, in which the image will be displayed along with description. In addition to the nav bar on top, I will also have a third column on the right, where I will be placing a few additional categories.

Currently, I did the coding and set it up. But One image is of different size. Due to this image, it gives spacing issues and the portfolio page looks a bit distorted.

I would like to know how to solve this issue.

Below is my index page code.

<!DOCTYPE html>
<html>
  <head> 
  <meta charset="utf-8">
    <title>
    Vaishak Sankararanarayanan|Cooking Veg Recipes
    </title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Change+One|Open+Sans:400italic,700italic,400,700,800'rel="stylesheet" type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  </head>
<body>
  <header>
  <a href="index.html" id="logo">
    <h1>Vaishak Sankaranarayanan</h1>
    <h2>Passionate Cook</h2>
    </a>
    <nav>
    <ul>
     <li><a href="index.html" class="selected">Portfolio</a></li> 
      <li><a href="about.html">About Me</a></li>
      <li><a href="contact.html">Contact Me</a></li>
     </ul>
    </nav>
  </header>
  <div id="wrapper">
    <section>
    <ul id="gallery">
      <li>
  <a href=img/aloo_bhindi.jpg>
  <img src=img/aloo-bhindi.jpg alt="" >
  <p>Experimentation with Img 1</p>
   </a>
      </li>
       <li>
  <a href="http://www.vegtastebuds.com/images/pasta-final2.jpg">
  <img src=img/IMG_20151231_221438.jpg alt="" >
  <p>Experimentation with Img 2</p>
   </a>
      </li>
      <li>
  <a href="http://www.vegtastebuds.com/images/poha-recipe-final1.jpg">
  <img src=img/poha-recipe-final1.jpg alt="" >
  <p>Experimentation with Img 6</p>
   </a>
      </li>
      <li>
  <a href="http://www.vegtastebuds.com/images/potato-curry-final.jpg">
  <img src=img/potato-curry-final.jpg alt="" >
  <p>Experimentation with Img 9</p>
   </a>
      </li>
      <li>
  <a href="http://www.vegtastebuds.com/images/pongal_final.jpg">
  <img src=img/pongal_final.jpg alt="">
  <p>Experimentation with Img 12</p>
   </a>
      </li>
    <li>
  <a href="http://www.vegtastebuds.com/images/matki-usal-final.jpg">
  <img src=img/matki-usal-final.jpg alt="">
  <p>Experimentation with Img 12</p>
   </a>
      </li>


    </ul>
  </section>

  <footer>
   <a href="http://google.com"><img src="twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
   <a href="http://yahoo.com"><img src="facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> 
  <p>&copy;2015 Vaishak Sankaranarayanan.</p>
  </footer>
  </div>
    </body>
</html>

Here is the CSS.

/****************************************
PAGE: Here is the CSS for page PORTFOLIO
*****************************************/

#gallery{
margin: 0;
padding: 0;
list-style:none;
}

#gallery li{
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}


#gallery li a p{
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;
}

@media screen and (min-width:480px)
{
  /************TWO COLUMN LAYOUT FOR CONTACT PAGE************/
#primary
  {
  width:50%;
  float: left;
  }

#secondary
  {
  width:40%;
  float: right;
  }
  /*********THREE COLUMN LAYOUT FOR PORTFOLIO PAGE*********/
#gallery li
  {
  width:33.333333333333%;
  }

  /****Call psuedo class to clear every 4th element that caused portfolio page image to appear distorted*************/

#gallery li:nth-class(4n)
  {
  clear:left;
  }

  /************TWO COLUMN LAYOUT FOR ABOUT PAGE************/
.profile-photo
  {
  float:left;
  margin:0 5% 80px 0;
  }

}

Thanks Vaishak

Welcome to the Treehouse Community

Looking to learn something new?

Vaishak S

Vaishak S

Stuck trying to create a custom 3 column portfolio page

Owa Aquino

Owa Aquino

huckleberry

huckleberry

Juliette Tworsey

Juliette Tworsey