Padding x position: fixed or position: absolute

I need to use padding to leave a spacing between the border and the center so what when I use padding the div is moving any have any ideas?

link

css

 html, body { height: 100vh; width: 100vw; margin: 0;background-image: url("http://img13.deviantart.net/ae68/i/2012/268/1/8/akiza_yugioh_wallpaper_by_iad1l-d5fv2aa.jpg");background-size: 100% 100%;min-height:500px;min-width:1000px;}
#logo {
height: 14vh;
width: 20vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 0vh;
left: 0.5vw;
background-image: url("img/fundo_logo.png");
background-size: 100% 100%;
}
#usuarioonline {

height: 84vh;
width: 20vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 15vh;
left:0.5vw;
background-image: url("img/fundo_online.png");
background-size: 100% 100%;
}
#perfil {
height: 14vh;
width: 27.5vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 0vh;
left: 21vw;
background-image: url("img/fundo_usuario.png");
background-size: 100% 100%;
}
#desafio {

height: 39vh;
width: 27.5vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 15vh;
left:21vw;
background-image: url("img/fundo_usuario.png");
background-size: 100% 100%;
}
#chat {

height: 39vh;
width: 27.5vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 55vh;
left:21vw;
background-image: url("img/fundo_chat.png");
background-size: 100% 100%;
}
#chatinput {

height: 5vh;
width: 27.5vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 94vh;
left:21vw;
background-image: url("img/fundo_chatinput.png");
background-size: 100% 100%;
}
#menu {

height: 14vh;
width: 50vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 0vh;
left:49vw;
background-image: url("img/fundo_menu.png");
background-size: 100% 100%;
}
#conteudo {

height: 83.5vh;
width: 50vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 15.5vh;
left:49vw;
background-image: url("img/fundo_conteudo.png");
background-size: 100% 100%;
}

SEE THE SOURCE CODE I used the padding only on the first div and it has moved sideways.

I know I can put another div inside it and add the attributes I want, but in order to reduce the code I would like to know if it is possible what I want.

html

 <div id="logo">logo</div>
 <div id="usuarioonline">useronline</div>
 <div id="perfil">perfil</div>
 <div id="desafio">desafio</div>
 <div id="chat">chat</div>
 <div id="chatinput">chatinput</div>
 <div id="menu">menu</div>
 <div id="conteudo">conteudo</div>