Try It Yourself: CSS Dilemma - From Where to Start

HTML Code

<!DOCTYPE html>
<html>
<head>
  <title>CSS Dilemma - From Where to Start</title>
</head>
<body>

<ul class="css-navigation">
  <li><a href="#">home</a></li>
  <li><a href="#">about us</a></li>
  <li><a href="#">services</a></li>
  <li><a href="#">gallery</a></li>
  <li><a href="#">blog</a></li>
  <li><a href="#">contact us</a></li>
</ul>

<div class="table">
  <div class="table-left">
  	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  	consequat.</p>
  </div>
  <div class="table-middle">
  	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  	consequat.</p>
  </div>
  <div class="table-right">
  	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  	consequat.</p>
  </div>
</div>

<div class="table">
  <div class="table-left">
  	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  	consequat.</p>
  </div>
  <div class="table-middle">
  	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  	consequat.</p>
  </div>
  <div class="table-right">
  	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  	consequat.</p>
  </div>
</div>	

<style>
.css-navigation{
  padding: 10px;
  background: #272727;
  display: flex;
  list-style: none;
}	
.css-navigation li{
  width: 100%;
  text-align: center;
}
.css-navigation li a{
  color: #fff;
  text-decoration: none;
}
.css-navigation li a:hover, .css-navigation li a:focus{
  color: #ccc;
}
.table{
  display: table;
  background: #151f28;
  padding: 30px;
  box-sizing: border-box;
  color: #222;
}
.table-left, .table-middle, .table-right{
  width: 30%;
  float: left;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
}
.table-middle{
  margin-left: 5%;
}
.table-right{
  float: right;
}
.table p{
	text-align: justify;
}
</style>
	
</body>
</html>

CSS Code

/* Write your CSS here */

CSS Dilemma - From Where to Start - Playground