I'm in the process of remaking my website, my coding knowledge isn't the best but I know enough to manage my own website.

I've just run into a problem with the portfolio section of my website. I've defined the width of my container to and the width for the individual folios to 33% and for some reason it doesn't fill the entire screen and I'm getting an odd margin on the right hand side of the screen.

If someone could kindly help me resolve this issue I'd be very grateful!

Best wishes,

Matt

HTML

 <link type="text/css" rel="stylesheet" href="test.css">

  <div id="portfolio">

        <a href="curry_for_change.php"><div class="portfolio_image_wrap">
            <img src="images/test_image_2.png" alt="Curry For Change" />
            <h3 class="portfolio_description">Curry For Change</h3>
        </div></a>

        <a href="move_me_on.php"><div class="portfolio_image_wrap">
            <img src="images/test_image_2.png" alt="Move Me On" />
            <h3 class="portfolio_description">Move Me On</h3>
        </div></a>

       <a href="move_me_on.php"><div class="portfolio_image_wrap">
            <img src="images/test_image_2.png" alt="Ceviche" />
            <h3 class="portfolio_description">Ceviche</h3>
        </div></a>

        <a href="the_value_engineers.php"><div class="portfolio_image_wrap">
            <img src="images/test_image_2.png" alt="Designing a Better A&E" />
            <h3 class="portfolio_description">The Value Engineers</h3>
        </div></a>

        <a href="the_house.php"><div class="portfolio_image_wrap">
            <img src="images/test_image_2.png" alt="The House" />
            <h3 class="portfolio_description">The House London</h3>
        </div></a>

        <a href="walk_free.php"><div class="portfolio_image_wrap">
            <img src="images/test_image_2.png" alt="Walk Free" />
            <h3 class="portfolio_description">Walk Free</h3>
        </div></a>

         <a href="christmas14.php"><div class="portfolio_image_wrap">
            <img src="images/test_image_2.png" alt="Christmas 2014" />
            <h3 class="portfolio_description">Christmas 2014</h3>
        </div></a>

         <a href="sue_ryder.php"><div class="portfolio_image_wrap">
            <img src="images/test_image_2.png" alt="Sue Ryder" />
            <h3 class="portfolio_description">Sue Ryder</h3>
        </div></a>

        <a href="tesco_charity_partnership.php"><div        class="portfolio_image_wrap">
            <img src="images/test_image_2.png" alt="Tesco Charity Partnership" />
            <h3 class="portfolio_description">Tesco Charity Partnership</h3>
        </div></a>

 </div>

CSS

 * {
margin:0px;
padding:0px;
 }

#portfolio {
width:100%;
height:auto;
margin-left:auto;
margin-right:auto;
 }

  .portfolio_image_wrap {
position:relative;
max-width:33%;
height:auto;
top:0;
left:0;
float:left;
 }

 .portfolio_image_wrap img {
height:auto;
max-width:100%;

  }

 .portfolio_description {
display:none;
background:#FF0066;
max-width:100%;
height:auto;
padding:10px;
text-decoration:none;
font-size:0px;
color:#fff;
position:absolute;
top:0px;
left:0px;
visibility:hidden;
opacity:0;
 }

 .portfolio_image_wrap:hover .portfolio_description {
display:block;
visibility:visible;
font-size:18px;
opacity:1;
  }

Here is a JS Fiddle version of my site development:

https://jsfiddle.net/hpq0s651/2/

I think the problem is here:

.portfolio_image_wrap {
    position:relative;
    max-width:33%;   /*try to set width: 33%; instead of max-width*/
    height:auto;
    top:0;
    left:0;
    float:left;
 }

UPDATE:

width: 33.33%;

more