*

.header {
    display: flex;
    text-align: center;
}


.list {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
padding: 2em;
margin: 1em;
text-align: center;
}

.bio__interests {
    display: flex;
    flex-wrap: wrap;
    float: left; /* Evenly space the child elements */
}

.interest {
    flex-basis: 16%;  /* Make each child element the same width */
    border: 1px dotted crimson;
    padding: 1em;
    margin: 0.5em;
    text-align: center; /* Center align the text in the boxes */
}