responsive padding in bootstrap 3?

[Gilead]

This may sound odd. I am redoing my site with bootstrap 3. It's a two column layout and when you hover over a link in the nav section, I want the background color to change and fill up most of the available space within the column. If I use width:100%, it goes beyond the space.

#box 
    {
 padding:.5em;
     background-color: #B2C9F9;
 padding-right:19%;

    }

    #box:hover 
{
     background-color: #D3E0FB;
   -webkit-transition: .5s;
 -moz-transition: .5s;
 -o-transition: .5s;
   transition: .5s;
    }


<nav>
        <a href="index.php"><img src="home.png" id="box" class="img-responsive" alt="" title="" /></a><br />
        <a href="profile.php"><img src="profile.png" id="box" class="img-responsive" alt="" title="" /></a><br />
        <a href="services.php"><img src="services.png" id="box" class="img-responsive" alt="" title="" /></a><br />
        <a href="webgallery.php"><img src="webgallery.png" id="box" class="img-responsive" alt="" title="" /></a><br />
        <a href="logogallery.php"><img src="logogallery.png" id="box" class="img-responsive" alt="" title="" /></a><br />
        <a href="jobs.php"><img src="jobs.png" id="box" class="img-responsive" alt="" title="" /></a>
           </nav>

Still very green with bootstrap.
I compromised by using padding-right, but it's not the effect I really wanted to use. What is a better way to do it? Even now, when I shrink the window, the color bleeds into the right column.
Thanks!

[Fotiman]

I don't see any code in your example that's setting the width?

[Fotiman]

Can you post a complete example (including the relevant markup and CSS)?

[Gilead]

padding-right:19%

[Fotiman]

There is nothing in the markup you posted that includes an id of "box", nothing in your sample has padding-right: 19%.

[Gilead]

If I move the padding from the box element to the hover element, I get some strange results. The image size shrinks down to about a pixel. What is the right way to extend the background color when hover is utilized?

[Fotiman]

Again... can you please post a complete example that shows where "box" fits in? The markup you posted does not contain any elements with id of "box", so whether you apply style to "#box" or "#box:hover" does not matter, as none of the markup contains "#box". It would be helpful to see an example demonstrating the problem you're trying to overcome.