Html Question posted in
Some basic documentation can be found here.

Html – h1 and list items not aligning in my navigation bar

I want "Connor Schotz" to be even with the "Home, About, Contact". Right now the h1 "Connor Schotz" is completely centered but the list is not. I am unsure of how to make them align properly.

header {
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  padding: 20px 50px;
  justify-content: space-between;
  align-items: center;
  border: 1px solid black;
}

h1 {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  font-weight: normal;
  padding: 16px;
  font-size: 24px;
  border: 1px solid black;
}

.nav {
  list-style: none;
}

.list {
  float: left;
}

li a {
  border: 1px solid black;
  text-decoration: none;
  color: black;
  padding: 16px;
  font-size: 24px;
}
<header>
  <h1>Connor Schotz</h1>
  <nav>
    <ul class="nav">
      <li class="list"><a href="#home">Home</a></li>
      <li class="list"><a href="#about">About</a></li>
      <li class="list"><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

I have tried changing everything and nothing seems to work.

Tags:

2

Answers


  1. 0

    The <ul> element has a default margin. You can explicitly set it to 0:

    header {
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  padding: 20px 50px;
  justify-content: space-between;
  align-items: center;
  border: 1px solid black;
}

h1 {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  font-weight: normal;
  padding: 16px;
  font-size: 24px;
  border: 1px solid black;
}

.nav {
  list-style: none;
}

.list {
  float: left;
}

li a {
  border: 1px solid black;
  text-decoration: none;
  color: black;
  padding: 16px;
  font-size: 24px;
}

ul {
  margin: 0; /* <-- here */
}
    <header>
  <h1>Connor Schotz</h1>
  <nav>
    <ul class="nav">
      <li class="list"><a href="#home">Home</a></li>
      <li class="list"><a href="#about">About</a></li>
      <li class="list"><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

    If you’re not familiar, a good way to debug issues like this is with the built-in development/debugging tools in modern web browsers. (e.g. Press F12 in Chrome to open developer tools.) In the DOM explorer of those tools you can highlight elements on the page and observe the styling being applied to them.

    Login or Signup to reply.
  2. 0

    Consider using a grid and size reset to 16px (the default for most browsers anyway) then align the grid items.

    Changed here in the CSS and reset style at the top for all elements with * there thus we retain the semantics of the element for the header h1.

    * {
  box-sizing: border-box;
  font-size: 16px;
  padding: 0;
  margin: 0;
}

header {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  padding-top: 1.25em;
  padding-bottom: 1.25em;
  padding-right: 3.125em;
  padding-left: 3.125em;
  justify-content: space-between;
  align-items: center;
  border: 1px solid black;
  grid-gap: 1em;
}

h1 {
  font-weight: normal;
}

.header-text {
  padding: 1em;
  font-size: 1.25em;
  border: 1px solid black;
}

nav .nav {
  list-style: none;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(3, 1fr);
}

.list a {
  border: 1px solid black;
  text-decoration: none;
  color: black;
  padding: 1em;
  font-size: 1.5em;
}

    <header>
  <h1 class="header-text">Connor Schotz</h1>
  <nav>
    <ul class="nav">
      <li class="list"><a href="#home">Home</a></li>
      <li class="list"><a href="#about">About</a></li>
      <li class="list"><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search