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

Space between doesn't create space – Html

Here is my HTML and CSS :

@import url("https://fonts.googleapis.com/css2?family=Inter&family=Montserrat:wght@100;200;300;500&family=Nunito+Sans:wght@300&display=swap");

* {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Montserrat";
}

nav {
  display: flex;
  width: 100%;
  margin: 0;
  align-items: center;
}

nav ul {
  display: flex;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
}

nav ul li {
  display: flex;
  justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gaming Campus</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav>
      <ul>
        <li>Accueil</li>
        <li>Business school</li>
        <li>Ecoleesport</li>
        <li>Cours de jeuvidéo</li>
        <li>Le campus</li>
        <li>Newsroom</li>
        <li>Parents</li>
        <li>FR/EN</li>
      </ul>
    </nav>
  </body>
</html>

For some reason, space between doesn’t seem to work : the elements won’t space and stay glued together, I have no idea why given it’s parent (nav) is set to occupy 100% of the width of it’s own parent (body). Any idea ?

Thanks

Tags:

2

Answers


  1. 0

    Since nav has display flex, the ul is not 100% width.

    Either remove display: flex from nav,

    nav {
  /* display: flex; */
  width: 100%;
  margin: 0;
  align-items: center;
}

    or add width: 100% to the ul if you must have display: flex on nav

    nav ul {
  display: flex;
  width: 100%;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
}

    https://jsfiddle.net/e3rgmpuz/ shows both uses

    Login or Signup to reply.
  2. 0

    FWIW not a direct answer but I tend to prefer grid and put a grid-gap in.

    I put ugly borders on to show what is where.

    @import url("https://fonts.googleapis.com/css2?family=Inter&family=Montserrat:wght@100;200;300;500&family=Nunito+Sans:wght@300&display=swap");
* {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Montserrat";
  font-size: 16px;
}

body {
  display: grid;
  place-items: center;
}

nav {
  border: solid red 1px;
}

nav ul {
  display: grid;
  grid-template-columns: repeat(8, minmax(9rem, 1fr));
  grid-gap: 1rem;
  border: solid 1px #00FF00;
  align-items: center;
  text-transform: uppercase;
}

nav ul li {
  border: solid 1px #0000FF;
  text-align: center;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Gaming Campus</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <nav>
    <ul>
      <li>Accueil</li>
      <li>Business school</li>
      <li>Ecoleesport</li>
      <li>Cours de jeuvidéo</li>
      <li>Le campus</li>
      <li>Newsroom</li>
      <li>Parents</li>
      <li>FR/EN</li>
    </ul>
  </nav>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search