Css List-horizontal

So I'm trying to copy this website template: link I want to make the list items horizontal like in the link above, But it just doesnt work with display:inline block which is what I

Solution 1:

You can do it in following way:

body {
  background: #077054;
  color: #315f52;
}

.header {
  text-align: center;
}
.headera {
  text-decoration: none;
  color: #99fa99;
  font-size: 20px;
  font-weight:normal;
  font-family: "latoregular";
}
.headerspan {
  color: #b6d8cf;
  font-size: 26px;
  text-transform: uppercase;
  font-family: 'nixie_oneregular';

}

.listHorizontal {
  display: flex;
  justify-content: space-around;
  color: #b6d8cf;
  font-size:30px;
  text-transform: uppercase;
  list-style: none;
}

<divclass="header"><ahref="https://freewebsitetemplates.com/preview/rehabilitation-yoga/index.html"><h1>Belle & Carrie</h1></a><span>rehabilitation yoga
    </span></div><ulclass="listHorizontal"><li>Home</li><li>About</li><li>Contact Us</li><li></li></ul>

Solution 2:

If you use display:flex the items align horizontally. You can then apply many more styles to the container or children to push the content around.

Flexbox

body {
  background: #077054;
  color: #315f52;
}

.header {
  text-align: center;
}
.headera {
  text-decoration: none;
  color: #99fa99;
  font-size: 20px;
  font-weight:normal;
  font-family: "latoregular";
}
.headerspan {
  color: #b6d8cf;
  font-size: 26px;
  text-transform: uppercase;
  font-family: 'nixie_oneregular';
}

.listHorizontal {
  color: #b6d8cf;
  font-size:30px;
  padding:0;
  text-transform: uppercase;
  list-style-type: none;
  display:flex;
  justify-content:space-evenly;
}

<divclass="header"><ahref="https://freewebsitetemplates.com/preview/rehabilitation-yoga/index.html"><h1>Belle & Carrie</h1></a><span>rehabilitation yoga
    </span></div><ulclass="listHorizontal"><li>Home</li><li>About</li><li>Contact Us</li><li>Test</li></ul>

Solution 3:

Add this css, it will work

.listHorizontalli {
    display: inline;
}

Solution 4:

.listHorizontalli {
  display: inline-block;
}