CODEWITHSUNDEEP
htmlcssnav
Leon
Leon

Reputation: 37

Full width navigation inside container

I'm fairly new to HTML and I'm trying to recreate this wireframe example for a school assignment: Wireframe

This is the code I wrote in order to get the result I'm aiming for:

/* Reset */
a {
    color: #000;
    text-decoration: none;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
body {
    margin: 0;
    font: 1.6rem Arial;
}
html {
    font-size: 62.5%;
}
*, *:before, *:after {
    box-sizing: border-box;
}

/* Container */
#container {
    margin: auto;
    padding: 0 3rem;
    max-width: 96rem;
}

/* Header */
header {
    width: 100%;
    padding: 2.5rem;
    background: lightgrey;
}
header > .logo {
    /* Style */
    width: 12.5rem;
    height: 12.5rem;
    background: grey;
    
    /* Flex */
    display: flex;
    align-items: center;
    justify-content: center;
}
header > nav ul li {
    width: 24%;
    display: inline-block;
}
header > nav ul li a {
    width: 100%;
    padding: 1rem 0;
    background: #fff;
    margin-top: 2.5rem;
    text-align: center;
    display: inline-block;
}
header > nav ul li a:hover {
    color: #fff;
    background: #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>CSS Grid In Production</title>
</head>
<body>

  <div id="container">
    <header>
    
      <a href="#" class="logo">Logo</a>
      
      <nav>
        <ul>
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a></li>
          <li><a href="#">Item 4</a></li>
        </ul>
      </nav>
      
    </header>
  </div>

</body>
</html>

I tried to use the solutions other people provided to those who had the same question, but none of them seem to work for me. I might be able to pull it off by using hacks, but I really don't want to do that. I feel like this is so simple, but I don't know how to fix it. So my question is: what would be the best way to recreate this simple header? How do I get the four navigation items to span the entire width of the container?

Apologies in advance if my question is too vague, I'm new to all of this.

Upvotes: 0

Views: 295

Answers (2)

Paulie_D
Paulie_D

Reputation: 115045

Uee flexbox on the ul

/* Reset */

a {
  color: #000;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

body {
  margin: 0;
  font: 1.6rem Arial;
}

html {
  font-size: 62.5%;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}


/* Container */

#container {
  margin: auto;
  padding: 0 3rem;
  max-width: 96rem;
}


/* Header */

header {
  width: 100%;
  padding: 2.5rem;
  background: lightgrey;
}

header>.logo {
  /* Style */
  width: 12.5rem;
  height: 12.5rem;
  background: grey;
  /* Flex */
  display: flex;
  align-items: center;
  justify-content: center;
}

header>nav ul {
  display: flex;
  justify-content: space-between;
}

header>nav ul li {
  flex: 1;
  margin: 0 .25em
}

header>nav ul li:first-child {
  margin-left: 0;
}

header>nav ul li:last-child {
  margin-right: 0
}

header>nav ul li a {
  width: 100%;
  padding: 1rem 0;
  background: #fff;
  margin-top: 2.5rem;
  text-align: center;
  display: inline-block;
}

header>nav ul li a:hover {
  color: #fff;
  background: #000;
}
<div id="container">
  <header>

    <a href="#" class="logo">Logo</a>

    <nav>
      <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
      </ul>
    </nav>

  </header>
</div>

Upvotes: 1

Miguel Calder&#243;n
Miguel Calder&#243;n

Reputation: 3091

If the problem is how to make the items span the entire width of their container, flex can help you by adding this:

ul {
  display: flex;
  justify-content: space-between;
}

Upvotes: 1

Related Questions