* {
  box-sizing: border-box;

}

body {
	background-color: #B9D4F7;
	font-family: Calibri;
}


.top {
	background-color: #E7DDFF;
	padding: 20px;
	float: left;
	width: 100%; /* The width is 100%, by default*/	
}

.family {
	background-color: #C2D0E2;
	padding: 20px;
	float: left;
	width: 100%; /* The width is 100%, by default*/	
}

.main {
	background-color: #F5EDCE;
	padding: 20px;
	float: left;
	width: 100%; /* the width is 100%, by default */
}
	
.rest {
	background-color: #65BFC3;
	padding: 20px;
	float: left;
	width: 100%; /* The width is 100%, by default */
	
}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 800px)  {
	.left, .main, .right {
		widht: 100%, /* The width is 100%, when the viewport is 800px or smaller */
	}
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
  background-color: #555;
  color: white;
}