Tamanho em %

Como proceder quando preciso colocar 3 blocos dentro de um container div de 100%? Queria que esses 3 blocos supostamente tivessem 100% juntos.
Tenho uma div de 100% e coloquei 3 blocos dentro dela, 2 blocos de 31% e 1 de 32%. Tem algum jeito de deixar o tamanho desses blocos certinhos pra que fique bom em qualquer resolução e de modo que eles fiquem no lugar sem descer? Minha tela tem 1366x768 e fica legal mas se pegar uma resolução maior sobra um espaço a direita e esse espaço só vai aumentando de acordo com a resolução.

Link para visualização: http://sophiseducacional.com.br/andamento/

#container{
float: left;
width: 100%;
height: auto;
text-align: center;

-webkit-box-sizing: border-box; / Safari/Chrome, other WebKit / -moz-box-sizing: border-box; / Firefox, other Gecko / box-sizing: border-box; / Opera/IE 8+ / }

#containerinside {
float: left;
width: 31%;
height: auto;
margin: 20px;
text-align: center;
padding: 10px;
background: #FFFFFF url("../imagens/conteudo1.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;

-webkit-box-sizing: border-box; / Safari/Chrome, other WebKit / -moz-box-sizing: border-box; / Firefox, other Gecko / box-sizing: border-box; / Opera/IE 8+ / }

#containerinside2 {
float: left;
width: 32%;
height: auto;
padding: 10px;
margin-top: 20px;
margin-right: 20px;
text-align: center;
background: #FFFFFF url("../imagens/location-1.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;

-webkit-box-sizing: border-box; / Safari/Chrome, other WebKit / -moz-box-sizing: border-box; / Firefox, other Gecko / box-sizing: border-box; / Opera/IE 8+ / }

#containerinside3 {
float: left;
width: 31%;
height: auto;
margin-top: 20px;
text-align: center;
background: #FFFFFF;
padding: 10px;
background: #FFFFFF url("../imagens/metodologia.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;

-webkit-box-sizing: border-box; / Safari/Chrome, other WebKit / -moz-box-sizing: border-box; / Firefox, other Gecko / box-sizing: border-box; / Opera/IE 8+ / }