Navbar should have 50% height of screen

Hi I’ve been trying to make a navbar about 20 min which should have 50% height of screen


.container > li {
  padding: 10px;
  text-align: center;
  font-size: 2em;
  color: #ffeead;
  box-sizing: border-box;
  background-color: #96ceb4;
  list-style-type: none;

html, body {
  background-color: #ffeead;
  margin: 10px;

.container {
  padding: 0;
.search-input {
  background: #ff6e68;
  border: 0;
  width: 100%;
  outline: 0;
  background: transparent;
  border-bottom: 1px solid #ffeead;
  color: #ffeead;
  color: #ffeead;

.search-input:focus {
  outline: none;

.container > li {
  background-color: #96ceb4;

/*.container > div:nth-child(2) {
  background-color: #ff6f69;

.container > div:nth-child(3) {
  background-color: #88d8b0;

.container > div:nth-child(4) {
  background-color: #96ceb4;

.container {
  border: 5px solid #ffcc5c;
  display: flex;


        <link rel="stylesheet" href="basic.css">
        <link rel="stylesheet" href="index.css">
        <nav id="wrapper">
            <ul class="container">
                <li class="search">
                    <input type="text" class="search-input" placeholder="Search">

I will be thankful if you help me

The first thing that I see is that you are including index.css in the HTML but the file name you gave above is style.css.

Sorry I made a mistake, name of file is index.css I wrote badly accidentally so it’s not wrong due to typo

I see you have the ul.container set to a height of 50%. It looks like it is working to me. I think you’ll need to be a little more specific about what you need help with.

for example If the browser is on fulscreen it should have 50% of height , but it doesn’t work. (

Can’t you just use vh instead?

Anyway, if you give the parent nav height: 100% it should also work. It takes it from the body and passes it to its children.

Ok it works but i had to use brackets. Earlier I was using scrimba and when I tried to use brackets it works