Need help with nav bar and button

HTML-CSS
#1

I’m trying to write a landing page project. But I can’t fix navbar and button “Order Now” so they can be responsive. I want navbar to get vertical, and button’s to go under the text in the center. You can find I hyperlink of my code in codepen. Thank you.

https://codepen.io/asimjanoski/pen/rNeaoMX

#2

For the navbar, select the parent element (#nav-bar) and apply the desired styling there. For example:
#nav-bar{ display: flex; flex-direction: column; height: 200px; }

However, you currently have
#header { overflow: hidden; }
so you’ll either have to change that to something like overflow: scroll to view the full contents, or adjust the height of the header.

For the order now buttons, I can think of a couple things to do. 1) Place the buttons in a separate div and style that to appear below the paragraph. 2) Style the current parent div (.product) similar to

 .product {
   display: flex;
   flex-direction: column;
   align-items: center;
  }

In that case, you’d probably want to adjust placement/size of the images.

Good luck! I like the idea of an Order Now button.

#3

Thank you, it was useful. It helped me a lot. You can now see the whole thing:

#4