I have been struggling since yesterday to make this work. I just can't seem to get these flex items to fill the container equally in width and height. No matter what I try, it's not cooperating.
<html>
<meta charset="utf-8">
<title>Practice Website</title>
<style>
.orange_text {
color: orange;
}
p {
}
h1 {
display: inline-block;
font-size: 30px;
}
.container {
display: flex;
border: 1px solid black;
margin-bottom: 2px;
align-items: stretch;
flex-direction: row;
}
.item {
display:flex;
color: white;
text-align: center;
flex: 0 0 50%;
}
hr {
border-top: 10px solid orange;
}
</style>
<body>
<header>
<table>
<td><h1><span class="orange_text">PRACTICE</span>SITE</h1></td>
<td><p style="display: inline-block; color: gray;">A practice website(:</br>Cool
<u>Wow</u></td>
</table>
<nav>
<div class="container">
<table>
<tr>
<td><div class="item" style="background-color: #ff8500;">EXAMPLE</div></td>
<td><div class="item" style="background-color: #e42a2b;">EXAMPLE</div></td>
<td><div class="item" style="background-color: #a700fe;">EXAMPLE</div></td>
<td><div class="item" style="background-color: #4aa7f4;">EXAMPLE</div></td>
<td><div class="item" style="background-color: #41cf5f;">EXAMPLE</div></td>
</tr>
</table>
</div>
</nav>
<hr>
</header>
</html>