Posicionamento de Div com CSS

Estou tentando deixar a seguinte estrutura ocupando toda a largura do browser (width: 100%):

<div id="menu">
     <div id="logo"></div>
     <div id="nome-marca"></div>
</div>

Deixei a #logo e #nome-marca com width de 100px e deixei o #menu com width de 100%.
Deixei um padding-left de 50px no #menu, mas ao fazer isso as Div’s ficam quebradas.
Se eu estivesse usando px ao invés de % era só compensar no width esses 50px mas como é % eu não sei como compensar.
Como faço isso?

Veja se você consegue tirar algumas idéias com esse exemplo:

<html>

	<head>
		<style>
			
			html, body {
			    height: 100%;
			}

			body {
			   display: table; 
			   margin: 0 auto;
			}

			.container {  
			    height: 100%;
			    display: table-cell;   
			    vertical-align: middle;    
			}

			.cent {
			  
			    background-color: yellow;      
			}
			
		</style>
	</head>	

	<body>
		<div class="container">
		    <div class="cent">
		    	MEU CONTEUDO CENTRALIZADO!
		    </div>
		</div>
	</body>

</html>

Abs

Não era pra ficar quebrado. Qual o conteúdo de logo e nome-marca? Você injeta elemento dinâmico ali?
Quando isso acontece, provavelmente alguma coisa dentro das divs, ou a imagem do logo ou qualquer outra coisa está ocupando mais que o 100% do menu em pixels.