kolommen naast elkaar uitlijnen

Hoi,

Ik ben bezig met een website en wil graag dat alle inhoud in een kader komt te staan. Hiervoor heb ik dus de class 'content' aangemaakt. Nu wil ik dit kader opdelen in 2 kolommen, dus heb de volgende classes aangemaakt: 'colmn-left' en 'column-right'. Wanneer ik deze naast elkaar probeer de zetten, lukt dat niet. De kolommen komen of onder elkaar te staan of naast elkaar maar dat begint de rechter kolom waar de linker stopt.

De kolommen moeten dus naast elkaar staan, graag zou ik dit dmv css voor elkaar willen krijgen en niet door middel van een tabel en de html code te plaatsen.

Dit is de code waar het om gaat:

index.html:

<div id="container">
		<div class="content">
			<h1>dsgfjhsdjhfgdjkflhvskeghrdfkjbhlzsbdfhlgvk</h1>
				<div class="column-left">
					<h1>Dit is de linker kolom</h1>
					<p>Dit is een test zin om wat ruimte op te vullen...</p>
				</div>
				<div class="column-right">
					<h1>Dit is de rechter kolom</h1>
					<p>En alweer een test zin om wat ruimte op te vullen... JEEJ</p>
				</div>
		</div>
	</div>

style.css:

#container {
	margin-left: 15%;
	margin-top: 10%;
	margin-right: 15%;
	
}



.content {
	color: #000;
	font-family: 'Cantarell', sans-serif;
	font-size: 12px;
	background-color: #ccc;
	padding: 5px;
	border-radius: 15px; /*afgeronde hoeken */
	box-shadow: 1px 1px 4px 4px #FF6600; /*schaduw langs kader */
	height:auto;
	clear:both;
	
}

.column-left {
	width: 40%;
	margin-left: 3%;
	margin-right: 3%;
	position:relative;	
}

.column-right {
	width: 40%;
	margin-left: 3%;
	margin-right: 3%;
	position:relative;
}