Responsive padding for fancybox thumbnails

Question

I want to remove the padding that occurs in my fancybox thumbnails when i resize the window down to a small view. At desktop view they look like this: https://i.sstatic.net/0K6cl.png

When i resize the viewport, the thumbnail takes up all 12 columns, but adds a large amount of padding to each side. Here is an image for reference: https://i.sstatic.net/h0r23.png

I want the thumbnail to take up all 12 columns, but get rid of the padding, while keeping the thumbnail centered on the page with the text below.

This is my HTML code for each thumbnail with associated text:

<div class="col-sm-6  top__767 center__767">
                            <div class="row">
                                <div class="col-sm-12  col-md-6">
                                    <a class="thumbnail fancybox" rel="" href="images/sommerhuse/2.jpg">
                                        <img class="img_wr" alt="" src="images/sommerhuse/2.jpg" />
                                    </a>
                                </div>
                                <div class="col-sm-12  col-md-6">
                                    <h5><strong>Hvide Sande</strong></h5>

                                    <p class="static-height">Minim elit et pariatur aliqua veniam qui fugiat duis ad nostrud occaecat et minim. Do
                                        culpa aliqua do sit mollit ea. Enim laboris laborum qui exercitation irure pariatur
                                        non eiusmod.</p>
                                    <a class="subpage_btn btn_top_offset" href="#">Tryk for at se Mere</a>
                                </div>
                            </div>
                        </div>

Answer 1

I think the problem is, that the a-tag have a width from 100% and a 1 px border. you can give the a tag a max-width and dislpay: inline-block and than give the parent div a text-align: center;