I am wondering how I could make this webpage look better/nicer. I'm not the creative sort of person, so,what do you guys think? I think those big white boxes do not look very good, what would be a better option?

HTML Code:
<!DOCTYPE html>
<html lang="en">

	<meta charset="UTF-8">
	<link rel="stylesheet" href="style2.css"/>

	<div class="main">
					<li><a href="index2.html">Home</a></li>
					<li><a href="about.html">About</a></li>
					<li><a href="projects.html">Projects</a></li>
					<li><a href="contact.html">Contact</a></li>
			<div class="title">
				<h1><u>Ryan Harper</u><h1>
			<div id="desc">
				<div id="holder">
					<div id="project">IMDb Extractor</div>
					<div id="details">This application is written in Python. It asks you for a movie or TV show, and it then prints out all of the information for that particular movie/tv show.
				internet needed for it to run.</div>
				<div id="holder">
					<div id="project1">The Solar System</div>
					<div id="details1">This application is written in Python, and uses a GUI framework, in this case, tkinter. It gives you information on all the planets in the solar system.</div>
				<div id="holder">
					<div id="project2">Project1</div>
					<div id="details2">project details</div>

	font-family: "Delicious";
	src: url("Delicious-Italic.otf");
	font-family: "os-semi";
	src: url("semi.ttf");

	font-family: "os";
	src: url("os.ttf");
.title {
	font-family: "Delicious";
	font-size: 50px;
	color: #336699;
	text-align: center;
	margin-top: 50px;	
u {
	text-decoration: none;
	border-bottom: 2px solid #336699;

body {

	width: 500px;
	margin: 0 auto;
#desc span {
	font-size: 40px;
	font-weight: bold;
	font-family: "os-semi";
#project1, #project, #project2{

#details, #details1, #details2{

#project:hover~#details, #project1:hover~#details1, #project2:hover~#details2{

#holder {
	border: 2px solid black;
	padding: 20px;

header {
	font-family: "os";
	background-color: #CCCCCC;
	border-bottom: 1px solid rgb(190,187,183);
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
/* 	padding: 0 5%; */
	z-index: 2;

header nav {
	float: right;
	overflow: hidden;

header nav li {
	text-decoration: none;
	line-height: 3em;
	color: rgb(102,102,102);
	border-bottom: 1px solid transparent;
	display: block;
	padding: 0 0.6em;
	float: left;
header nav li:hover{
	border-bottom: 1px solid #336699;
a { text-decoration: none; color:rgb(102,102,102); }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:focus { text-decoration: none; }
a:hover, a:active { text-decoration: none; }

ul { margin: 0; padding: 0; }
ul li { margin: 0; padding: 0; list-style: none; }
ul li a { color: blue; }
ul li div { display: none; }
Also, "os" is Open Sans Regular, "os-semi" is Open Sans Semibold Italic, and Delicious is Delicious-italic.

How could I make those big white boxes look nicer?