Header background problem

I’m working on creating a website hosting my CV and I have a problem with my header section. When I downsize my screen component in the header move beneath each other. Yet my background color doesn’t increase in height, making one block fall outside the background color (see images). I can’t see how I can fix that. Can someone provide me some advice here? Relevant HTML and CSS provided below the images. Thank you for your help. :slight_smile:

Normal header

Small header:

HTML code:

            <sectiion class="headerpicture">
                <img id="profielfoto" src="./recources/Images/My face.jpg" alt="Profielfoto van naam">
            <section class="headercontent">
                <h1>First and last name</h1><br>
                <h3 id="motto">Life motto/mission statement or something like that</h3>
            <section class="perinfo">
                <h3>Persoonlijke gegevens</h3>
                    <li>Geboortedatum: </li>
                    <li>Woonplaats: </li>
                    <li>Nationaliteit: </li>
                    <li>E-mail: </li>
                    <li>Nummer: </li>

CSS code

header {
    background-color: aqua;
    min-height: 250px;
    max-width: 1600px;
    align-content: center;
    margin: auto;
    border-radius: 20px;

.headerpicture {
    display: block;
    margin-top: 20px;
    margin-left: 100px;
    float: left;

.headercontent {
    display: inline-block;
    padding-top: 75px;
    margin-left: 100px;

#profielfoto {
    height: 200px;
    width: 160px;
    border-radius: 70%;

header h1 {
    display: inline-block;


#motto {
    display: inline-block;

.perinfo {
    display: block;
    float: right;
    border: 3px solid black;
    padding: 10px;
    margin-top: 50px;
    margin-right: 100px;

.perinfo h3 {
    margin: auto;
    margin-bottom: 4px;

.perinfo ul {
    list-style-type: none;
    padding: 0;
    margin: 0;