UL List overflows in heading

Question

I am developing a website and in the heading, there are quite a few list items. The problem is that I want the last list item to end where the parent div ends.

I want my the last item of this ul list "Emergency" to end with the end of the nav width. It is always overflowing.

Here is my code:

header {
  width: 100%;
  height: 15%;
  background-color: #ab9a31;
}

div.container {
  width: 75%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  position: relative;
  top: -8px;
}

p {
  white-space: nowrap;
  width: 100%;
}

nav {
  width: 100%;
}
nav ul {
  list-style-type: none;
  display: flex;
  border: rgba(255, 255, 255, 0.5) solid 2px;
}

nav ul li {
  white-space: nowrap;
  padding: 0 2%;
}

nav ul li a {
  font-size: 0.9em;
  color: black;
  text-decoration: none;
}

nav ul li a:hover {
  text-decoration: underline;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Title</title>
  <meta name="viewport" content="width=device-width initial-width=1.0">
  <link src="css/main.css" rel="stylesheet">
</head>
<body>
<header>
  <div class="container">
    <p>Find info for?</p>
    <nav>
      <ul>
        <li><a href="#">Apply</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">President</a></li>
        <li><a href="#">Shop</a></li>
        <li><a href="#">Visit</a></li>
        <li><a href="#">Give</a></li>
        <li><a href="#">Emergency</a></li>
      </ul>
    </nav>
  </div>
</header>
</body>
</html>

How do I fit the entire list within the nav width?

don't use percentage padding, this is your issue. Use pixel values — Temani Afif, Dec 15 '20 at 14:14

score 0 · Accepted Answer · answered Dec 15 '20 at 12:23

Just use this code.

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

header {
  display: flex; 
  width: 100%;
  height: 15%;
  background-color: #ab9a31;
}

div.container {
  width: 75%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

p {
  white-space: nowrap;
  width: auto;
}

nav {
  display: flex;
  width: auto;
}
nav ul {
  list-style-type: none;
  display: flex;
  border: rgba(255, 255, 255, 0.5) solid 2px;
  padding: 0;
  box-sizing: border-box;
}

nav ul li {
  display: table;
  white-space: nowrap;
  padding: 0 2%;
}

nav ul li a {
  font-size: 0.9em;
  color: black;
  text-decoration: none;
}

nav ul li a:hover {
  text-decoration: underline;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Title</title>
  <meta name="viewport" content="width=device-width initial-width=1.0">
  <link src="css/main.css" rel="stylesheet">
</head>
<body>
<header>
  <div class="container">
    <p>Find info for?</p>
    <nav>
      <ul>
        <li><a href="#">Apply</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">President</a></li>
        <li><a href="#">Shop</a></li>
        <li><a href="#">Visit</a></li>
        <li><a href="#">Give</a></li>
        <li><a href="#">Emergency</a></li>
      </ul>
    </nav>
  </div>
</header>
</body>
</html>

Why do we assign `width: auto;`? How does the behavior of the elements change in `display: table`? — Nishant Jalan, Dec 15 '20 at 13:03
@NishantJalan, You are specifying `justify-content: space-between`, so you do not need to specify `width: 100%` for each side. Auto is the actual width of the element. `display: table` is an imitation of `fit-content`. — s.kuznetsov, Dec 15 '20 at 13:07

UL List overflows in heading

1 Answers1