/* CSS Document */

/* Hierna is de css code van de menubar bovenin */

/* Add a black background color to the top navigation */
.topnav {
    background-color: #BFFF00;
    overflow: hidden;
}



/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #333;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 20px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #D3AF37;
    color: black;
}

/* Add an active class to highlight the current page */
.active {
    background-color: #4CAF50;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
 

} 
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
} 


/* einde van de css code van de menubar bovenin */

/* Begin van de hr code. Je kunt de dikte van de code varieren door border width te veranderen qua aantal pixels Maar ik heb pogingen gedaan de kleur te veranderen en ik vond nog een andere regel om hr mee te definieren maar dat kon ik niet werkend krijgen. Ik slaag er niet in de kleur te veranderen. */


hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 4px;
    
}


/* Tot hier staat de opmaak van de hr code -->

/* code voor 3 kolommen */

<style>
.col-container {
    display: table;
    width: 100%;
}
.col {
    display: table-cell;
    padding: 16px;
}

/* Eiende code voor de drie kolommen */



/* Begin van de css basiscode die ik heb gekregen */


/* CSS Document */


/*Mobiel*/
@media screen and (max-width: 720px){

	body{
		font-size:1.2em;
		line-height: 1.6em;
	}

	h1{
		padding: 0.1em;
		font-size: 1.3em;
		line-height: 1.4em;
	}

	h2{
		padding: 0.1em;
		font-size: 1.2em;
		line-height: 1.4em;
	}

}

/*Desktop*/
@media screen and (min-width: 720px) { 

	body{
		font-size: 1em;
		line-height: 1.6em;
	}
}

body{
	font-family: 'Open Sans', sans-serif;
	background-color: lightyellow;
    margin:0;
  border:0;
  padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 40px;
    padding-left: 10px;
  height:100%; 
  max-height:100%;
    
   } 
}

h1{
	padding-top: 10px;
	padding-bottom: 10px;
	font-weight:bold;


}


a{
	text-decoration: none;
	color: red;
}

#header{
 padding:10px;
 background:#6ecff6;
 
 }

#image{
 padding:10px;
 background:#000000;
 }

#content{
 padding:50px;
 background:#F9F;
}

#content a:link, #content a:visited{
 color:#ff4f00;}

#footer{
 padding:10px;
 background:#6ecff6;
 }

#header a:link, #header a:visited{
 color:#333333;
 }
 
#footer a:link, #footer a:visited{
 color:#333333;
    
    }

div.figure {
  float: left;
  width: 65%;  
    height: auto;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: 17px;
  text-indent: 0;
}

div.figure2 {
  float: center;
  width: 95%;  
    height: auto;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure2 p {
  text-align: center;
  font-style: italic;
  font-size: 17px;
  text-indent: 0;
}

div.figure3 {
  float: left;
  width: "400px";  
    height: auto;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure3 p {
  text-align: center;
  font-style: italic;
  font-size: 17px;
  text-indent: 0;
}

div.figure4 {
  float: left;
  width: 20%;  
    height: auto;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure2 p {
  text-align: center;
  font-style: italic;
  font-size: 17px;
  text-indent: 0;
}


 <style>
span.a {
  display: inline; /* the default for span */
  width: 220px;
  height:300px;
  padding: 0px;
  border: 1px solid blue;  
  background-color: yellow; 

}

span.b {
  display: inline-block;
  width: 220px;
  height: 300px;
  padding: 0px;
  border: 1px solid blue;    
  background-color: yellow; 
  
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: yellow; 
}
</style>



/* einde van de css basiscode die ik heb gekregen */