How do I not get the site bugged when I lower the screen and have a problem with a button going up in CSS?

Question

I’m doing a test and I wanted to know how not to make the screen bugle, just below has the normal page and it when the screen shrinks.

And I have another problem, I wanted to give an effect of the button sink when pressed, I saw some video lessons, but my button when active the event active and put top:5px; it rises as in the image below.

HTML code

    <div id="moldura"><!--Essa div serve para os slides também-->
    <input id="bt1"  type="button" value="<" onclick="troca(-1)" />     
    <input id="bt2" type="button" value=">"onclick="troca(1)"/>
    </div>

CSS code

 #moldura{//Localização da Div do slide
width:600px;
height: 450px;
background-color: #eeeeee;
transition: background-image 2s;
position:relative;
top:460px;
left:350px;
     }  

#bt1{//Botão 1
position: relative;
top:170px;
left:-20px;
font-size: 70px;
font-family: arial;
font-weight: 700;
border:none;
padding: 10px;
cursor: pointer;
background: black;
color: #fff;
box-shadow: 0 5px 0 #006000;
    }

#bt2{//botão2
position: relative;
clear:both;
top:170px;
left:500px;
font-size: 70px;
font-family: arial;
font-weight: 700;
border:none;
padding: 10px;
cursor: pointer;
background: black;
color: #fff;
box-shadow: 0 5px 0 #006000;
}   

#moldura input:hover{
background: blue;
color: #fff;
box-shadow: 0 5px 0 #003f00;
}

#moldura input:active{
box-shadow: none;
top:5px;//Aqui era para acontecer o pulo do gato, era pra parecer que o   
botao afundou, mas leva o botao la em cima como na imagem.
}

Answer 1

As for your first question, try to put a percentage for each space. Create a div to store the texts and thus separate a size in percentage.

Example:

#wrap{
    max-width: 100%;
}

#foto-f-society{
    width: 20%;
    margin: 0 10%;
}

#textos{
    width: 60%;
}

The second question, take a look at this Click Button Effect with CSS.

Answer 2

Creating sites that adapt to the size of the screen is a job that most often depend on an unnecessary effort

"There’s no need to reinvent the wheel" - Of course you’ve heard about it and there are many solutions ready to add responsiveness to your pages

You can use css frameworks like bootrstrap, Foundation, Pure, semantic ui

But you can already have a website ready and don’t want third-party code messing up everything you’ve already done? Another solution is to use grids systems. Ex: http://www.w3schools.com/css/css_rwd_grid.asp