Ultrapassando o 100% do browser

Bom dia,

estou montando um layout com 3 'seções': header, main e footer, porém, no header e no footer quero que fico 100% largura e no main quero que ultrapasse os 100%, criando a barra de rolagem horizontal somente nessa div.

tentei colocar o width: auto; mesmo como o conteúdo dele sendo maior, quando chega em 100% o restante é jogado para baixo, quebrando a linha.

colocando o tamanho da div main (está como display: table) como width: 2620px; (é o tamanho que preciso mais ou menos) deu certo, ultrapassou o limite, entretanto, criou a barra de rolagem na pagina inteiro e não somente nessa div. Tentei usar na div: overflow-x: scroll, sem sucesso também.

.table{ display: table; overflow: scroll;}
.row{ display: table-row;}
.left{float: left;}

.tile{
	width: 122px;
	height: 122px;
	display: inline-block;
	margin: 2px;
	padding: 2px;
	float: left;
}

.table#movimento > .row > .tile:hover,
.table#cadastro > .row > .tile:hover,
.table#relatorio > .row > .tile:hover,
.table#manutencao > .row > .tile:hover{

	background-color: #ff8000;
	transition: 0.7s;
}

.table#movimento > .row > .tile{

	background-color: #00bde3;
}

.table#cadastro > .row > .tile{

	background-color: #e76221;
}

.table#relatorio > .row > .tile{

	background-color: #6955a5;
}

.table#manutencao > .row > .tile{

	background-color: #ddc100;
}

<div class="table">
 <div id="movimento" class="table left">
 <div class="row">
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 </div>
 <div class="row">
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 </div>
 <div class="row">
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 </div>
 <div class="row">
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 </div>
 </div>
 <div id="cadastro" class="table left">
 <div class="row">
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 </div>
 <div class="row">
 <div class="tile"></div>
 <div class="tile"></div>
 </div>
 <div class="row">
 <div class="tile"></div>
 <div class="tile"></div>
 </div>
 <div class="row">
 <div class="tile"></div>
 <div class="tile"></div>
 </div>
 </div>
 <div id="relatorio" class="table left">
 <div class="row">
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 </div>
 <div class="row">
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 </div>
 <div class="row">
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 </div>
 <div class="row">
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 <div class="tile"></div>
 </div>
 </div>
 <div id="manutencao" class="table left">
 <div class="row">
 <div class="tile"></div>
 <div class="tile"></div>
 </div>
 <div class="row">
 <div class="tile"></div>
 <div class="tile"></div>
 </div>
 <div class="row">
 <div class="tile"></div>
 <div class="tile"></div>
 </div>
 <div class="row">
 <div class="tile"></div>
 <div class="tile"></div>
 </div>
 </div>
 </div>
 </div>

Obrigado desde a já