Help in CSS Flex

I want to Build a header:
IWant
But I got this:

MyHTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Concept of FlexBox</title>
	<link rel="stylesheet" href="styles.css" />
</head>
<body>
	<div class="menu-container">
		<div class="header-container">
			<div class="header">
				<div class="subscrbe">Subscribe &#9662;</div>
				<div class="logo"><img src="images/awesome-logo.svg" alt="logo"/></div>
				<div class="social"><img src="images/social-icons.svg" alt="social-icons" /></div>
			</div>
		</div>
		<div class="menu">
			<div class="date">Jul13, 2019</div>
				<div class="links">
					<div class="signup">SignUp</div>
					<div class="login">Login</div>
				</div>
		</div>
	</div>
</body>
</html>

My CSS Code:

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
.menu-container{
	color:#fff;
	background-color: #5995DA;
	padding:20px 0;
	display: flex;
	justify-content: center;
}
.menu{
	width:900px;
	display: flex;
	justify-content: space-between;
}
.links{
	display: flex;
	justify-content: flex-end;
}
.login{
	margin-left:20px;
}
.header-container{
	color:#5995DA;
	background-color: #D6E9FE;
	display: flex;
	justify-content: center;
}
.header {
  width: 900px;
  height: 300px;
  display: flex;
  justify-content: space-between;
  align-items:center;
}

Need some chnges to build a header like first image.

Hey,

You will need a flex-direction: column in your menu-container class. Also change the order in your HTML structure so the menu will be printed above the header-container. You can use Flexbox to switch the elements’ rendering order, but a best practice would be to tweak the actual HTML structure so screen readers see it the way they should.

Thank you.
Could you please tell how to fix the header on top along with menu. when i set position:fixed to the header id, my body content(which need to be scrolled) is not appearing right below the header. it goes under the fixed header.
Could you help to create a fixed header with menu on left using the concept of CSS flex. As I am going to do my third project in Responsive Web Design.
Thanks once again.
Hope it helps me to learn flex concept clearly.

When you fix a header to the top you take it out of the normal document flow. You now have to give the next element in your HTML a top margin equal to the height of the header to push it back down so you can see it where you expect it to be.

When i do what you have just said, the height is applying to the fixed header and it is moved to the height that is equal to the give height. Even though i applied margin-top: = height of the fixed header, that is applying to the fixed header but not to the next div element.
Is there another way to do this without using the height attribute? Like, when we use the concept of flex, we didn’t specify any height explicitly.

<header style="position:fixed; top:0;">
  <nav>
    <ul>
       <li></li>
       <li></li>
    </ul>
  </nav>
</header>
<main style="margin-top: same height as header;">
...
</main>

The main will not affect header

Thank you very much.