How do I center the elements on the header bar?

Hi, I’m working on the Display and Position project called “Broadway”. I completed all the tasks and wanted to center the elements in the header bar (they were all towards the left) but couldn’t figure out how to do it. Can anyone help me with this?

Hello!

This is the code I used to accomplish that, though you may need to change the width percentage (under nav li) to fit your screen.

html, body {
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  position: fixed;
  width: 100%;
  z-index: 5;
}

nav {
  margin: 0 auto;
  padding: 20px 0;
}

nav li {
  color: #FFF;
  cursor: pointer;
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 16px;
  width: 22%;
  text-align: center;
}

main {
  position: relative;
  text-align: center;
  top: 80px;
}

main h1 {
  color: #333;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 70px;
  margin-top: 0px;
  padding-top: 80px;
  margin-bottom: 80px;
  text-transform: uppercase;
}

section {
  position: relative;
  top: 40px;
}

footer {
  background-color: #333;
  color: #FFF;
  padding: 30px 0;
}

footer p {
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  font-size: 11px;
}

.container {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 10px;
  text-align: center;
}

.jumbotron {
  height: 800px;
  background-image: url("https://content.codecademy.com/projects/broadway/bg.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.btn-main {
  background-color: #333;
  color: #FFF;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1.3px;
  padding: 16px 40px;
  text-decoration: none;
  text-transform: uppercase;
}

.btn-default {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;  
  margin-bottom: 20px;      
}

.supporting {
  padding-top: 80px;
  padding-bottom: 100px;
}

.supporting .col {
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  height: 200px;
  text-align: center;
  width: 200px;
}

.supporting img {
  height: 32px;
}

.supporting h2 {
  font-weight: 600;
  font-size: 23px;
  text-transform: uppercase;
}

.supporting p {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  padding: 0 20px;
  margin-bottom: 20px;
}

.supporting a {
  background-color: white;
  color: #333333;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.3px;
  text-decoration: none;
  text-transform: uppercase;
  padding: 10px;
  margin-bottom: 10px;
  border: 2px solid #333333; 
}

@media (max-width: 500px) {
  main h1 {
    font-size: 50px;
    padding: 0 40px;
  }

  .supporting .col {
    width: 100%;
  }
}
1 Like

Thank you very much.

Happy to help out :slight_smile: