I have added these three pictures to a WP site. Code is:

    #frontContainer { 
        max-width: 1200px; 
    #frontContainer ul { 
        list-style: none;
    #frontContainer li { 
        height: 599px; 
        width: 376px; 
        float: left; 
        margin-right: 5px;    
        border: 2px solid black;  
        opacity: 1; 
    #frontContainer img { 
        height: 100%; 
        width: 100%;  
    #frontContainer li:hover{ 
        border: 2px solid #47B957; 
        opacity: .5;
 <div id='frontContainer'>
            <li><a href='http://pacificexpress.com.au/?p=975'><img src='http://i59.tinypic.com/2gt6fsp.jpg'/></a></li>
            <li><a href='http://pacificexpress.com.au/rapid-worker/'><img src='http://i61.tinypic.com/34pifd2.jpg'/></a></li>
            <li><a href='http://pacificexpress.com.au/?p=971'><img src='http://i58.tinypic.com/348ohhg.jpg'/></a></li>

this works when testing ( i.e. the three images sit in a row with 5px margin in-between each image) however once I add this to the website (wordpress platform running twenty-twelve theme) it seems to increase the margin.

I cannot seem to change this … anyone able to help with this ?

the site is www.pacificexpress.com.au


James M.

Read more here: WordPress twenty twelve adding extra margin to images


If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , , , , ,

Wordpress related questions and answers: