Div entering another

I have a div with an image, and some information inside it, the image is responsive and increasing according to the size of the interface:

<div class="col-sm-12" align="center" style="margin-top:50px;  height:20%;  max-height:40%; ">
    <img src="../img/1.png" class="img-responsive" style="max-height:40%;" />

        <table id="table"  >
            <thead>
                <tr>
                    <td  width="22%" align="left"> <a href="#" class="font01" style="margin-left:20%">Cliente</a></li></td>
                    <td  width="20%" align="center"> <a href="#" class="font01" style="margin-left:-50%">Itens</a></li></td>
                    <td  width="20%" align="center"> <a href="#" class="font01">Pagamento</a></li></td>
                    <td  width="20%" align="center"> <a href="#" class="font01">Transporte</a></li></td>
                    <td  width="20%" align="right">  <a href="#" class="font01" style="margin-right:15%">Finalizar</a></li></td>       
                </tr>
            </thead>
        </table> 
</div>

Button:

<div id="link-btn">
        <a class="btn btn-default"  style="width:50%;  font-size:11px; position:relative; max-width:50% "  aling="center" href="../pages/listarClientes.aspx">Adicionar Cliente</a>
    </div>

Problem is that by increasing the size of the screen, the image goes down and the button goes up, and the button stays inside.