The text positioned between the header and footer elements is flowing beneath them. I attempted to use flex-start and flex-end on both the header and footer, but they do not align to the absolute top. Instead, they are positioned above and below the content.
The CSS style for the header is as follows:
.Header {
width: 100%;
position: absolute;
top: 0;
flex-wrap: wrap;
}
The CSS style for the footer is as follows:
.Footer {
width: 100%;
position: absolute;
bottom: 0;
flex-wrap: wrap;
}
If it helps, here is the CSS style for the content:
.Content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}