As a newbie, I ran into trouble with the responsive elements of my code.
<html>
<head>
<style>
.nav-section {display: flex; justify-content: center; font-family: sans-serif; align-items: center; padding: 1rem;}
.header h1 {line-height: 1px;}
.header {flex: 60%;}
.nav-parent {flex: 40%;}
.header span {font-size: 12.8px; font-weight: 100; font-style: italic;}
ul li {list-style: none;}
ul li ~ li {margin-left: 8px;}
.btn {flex: 1; padding: 8px 0; text-align: center;}
.menu {display: flex; justify-content: center; color: #555; font-size: 12.8px; }
.active {background: #21759B; color: #ffffff;}
</style>
<body>
<div class="nav-section">
<div class="header">
<h1>Lorem Ipsum</h1>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor magna ullamcorper, tristique lorem eu, facilisis elit.</span>
</div>
<div class="nav-parent">
<ul class="menu">
<li class="option active btn">Option</li>
<li class="option1 btn">Option1</li>
<li class="option2 btn">Option2</li>
<li class="option3 btn">Option3</li>
<li class="option4 btn">Option4</li>
<li class="option5 btn">Option5</li>
</ul>
</div>
</div>
</head>
</body>
</html>
Under 590px, The "Lorem Ipsum" text merges into each other.
I want to resemble the responsive elements to look like this, when I collapse the screen size under 591px.
What should I do to achieve the results like the picture posted above?