I'm having issues with the 2nd part of the image, where the coloured blocks on the left side begin, and then the 4 centered images in the middle + the 3 paragraphs on the right side. I cannot get them to align horizontally and I even tried playing with their width/height + overflow: auto.

```
<!doctype html>
<head>
<title>onze titel</title>
<meta charset="UTF-8">
<meta name="description" content="deze html oefenpagina werd gemaakt om de mogelijkheden met audio en video te zien">
<link rel="stylesheet" href="css/sheet2.css" type="text/css">
</head>
<body>
<h1>titel van de webpagina</h1>
in kleur</br></br></br>
<div id="inhoud">

<div id="cyaan"></div>
<div id="magenta"></div>
<div id="geel"></div>
<div id="rood"></div>
<div id="groen"></div>
<div id="blauw"></div>

<div id="midden">
<div id="afb1"></div>
<div id="afb2"></div>
<div id="afb3"></div>
<div id="afb4"></div>
</div>

</div>
</body>
</html>

```

And here's the CSS:

```
#inhoud {
    width: 500px;
    border: 1px solid black;
    overflow: auto;
}
#cyaan {width: 120px;
height: 25px;
background: cyan;}

#magenta {width: 120px;
height: 25px;
background: magenta;}

#geel {width: 120px;
height: 25px;
background: yellow;}

#rood {width: 120px;
height: 25px;
background: red;}

#groen {width: 120px;
height: 25px;
background: green;}

#blauw {width: 120px;
height: 25px;
background: blue;}

#midden {  
  margin-left: auto ;
  margin-right: auto ;
        width: 100%;  
    }  

#afb1 {  
    float: left;  
    width: 15%;  
    height: 100px;  
    background-image: url('../img/lima.jpg');
    }  

#afb2 {  
    float: left;  
    width: 15%;  
    height: 100px;  
    background-image: url('../img/schu.jpg');
    }  

#afb3 {  
    clear: left;  
    float: left;  
    width: 15%;  
    height: 100px;  
    background-image: url('../img/car.jpg');
    }  

    #afb4 {  
    float: left;  
    width: 15%;  
    height: 100px;  
    background-image: url('../img/model.jpg');
    } 

```

![enter image description here](https://i.stack.imgur.com/PxQwK.jpg)