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

(flexbox) Why the box doesn't extend to the borders of the screen? – Html

Here is my HTML :

<!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>Cabinet d'avocats à Paris 8</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter&family=Nunito+Sans:wght@300&display=swap');
        </style>

    <header class="header">

        <div class="logo"><img src="/Users/jeandizian/Documents/Code/Site-avocats/Assets/Imgs/Logo-JDB.png.webp" alt="logo" height="120px"></div>

        <ul class="ul">
            <!-- why when I put <li><img src="/Assets/Imgs/single-line-icon.png" alt=""></li> the image is not displayed ? -->
            <li><img src="/Users/jeandizian/Documents/Code/Site-avocats/Assets/Imgs/enveloppe-icon.png" alt="enveloppe icon" height="15px"></li>
            <li>[email protected]</li>
            <li><img src="/Users/jeandizian/Documents/Code/Site-avocats/Assets/Imgs/single-line-icon.png" alt="vertical line" height=18px ></li>
            <li><img src="/Users/jeandizian/Documents/Code/Site-avocats/Assets/Imgs/phone-icon.png" alt="phone icon" height=15px></li>
            <li>+33 1 42 56 96 96</li>
            <li><img src="/Users/jeandizian/Documents/Code/Site-avocats/Assets/Imgs/single-line-icon.png" alt="vertical line" height="18px"></li>
            <li><img src="/Users/jeandizian/Documents/Code/Site-avocats/Assets/Imgs/single-line-icon.png" alt="vertical line" height="18px"></li>
            <li>Devis gratuit</li>
            <li><img src="/Users/jeandizian/Documents/Code/Site-avocats/Assets/Imgs/single-line-icon.png" alt="vertical line" height="18px"></li>
        </ul>

       
    </header>





</body>
</html>

Here is my CSS :

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
}

.header{
    display: flex;  
    background-color: aqua;
    top: 0;
    left: 0;
    right: 0;
}

  
.header ul {
    list-style: none;
    margin: 0;
    display: flex;
    justify-content: space-around;
}

I don’t understand why the ul elements stay sticked together although I have entered justify content : space around

Here is a visual representation of the problem

I tried to put display flex on both the header and the ul, but the ul elements won’t move.

Thank you

Tags:

2

Answers


  1. 0

    Try using justify-content: space-between; like this:

    body {
  font-family: 'Inter', sans-serif;
  margin: 0;
}
.header{
  display: flex;  
  background-color: aqua;
  top: 0;
  left: 0;
  right: 0; 
  justify-content: space-between;  
}
.header ul{
  list-style: none;
  margin: 0;
  display: flex;
  justify-content: space-between;  
  width: 75%; 
}
.header logo{
  width: 25%;    
}
    <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>Cabinet d'avocats à Paris 8</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter&family=Nunito+Sans:wght@300&display=swap');
        </style>
<header class="header">
  <div class="logo"><img src="/Users/jeandizian/Documents/Code/Site-avocats/Assets/Imgs/Logo-JDB.png.webp" alt="logo" height="120px"></div>
    <ul class="ul">
        <!-- pourquoi quand je mets <li><img src="/Assets/Imgs/single-line-icon.png" alt=""></li> l'image ne s'affiche pas ? -->
        <li><img src="/Users/jeandizian/Documents/Code/Site-avocats/Assets/Imgs/enveloppe-icon.png" alt="enveloppe icon" height="15px"></li>
        <li>[email protected]</li>
        <li><img src="/Users/jeandizian/Documents/Code/Site-avocats/Assets/Imgs/single-line-icon.png" alt="vertical line" height=18px ></li>
        <li><img src="/Users/jeandizian/Documents/Code/Site-avocats/Assets/Imgs/phone-icon.png" alt="phone icon" height=15px></li>
        <li>+33 1 42 56 96 96</li>
        <li><img src="/Users/jeandizian/Documents/Code/Site-avocats/Assets/Imgs/single-line-icon.png" alt="vertical line" height="18px"></li>
        <li><img src="/Users/jeandizian/Documents/Code/Site-avocats/Assets/Imgs/single-line-icon.png" alt="vertical line" height="18px"></li>
        <li>Devis gratuit</li>
        <li><img src="/Users/jeandizian/Documents/Code/Site-avocats/Assets/Imgs/single-line-icon.png" alt="vertical line" height="18px"></li>
    </ul>       
  </header>
</body>
    Login or Signup to reply.
  2. 0

    That is because the ul element is not full width. Therefore, doesn’t matter how much you want them to separate, since there is no space for them to do so, they will not move. So, add this line to your style:

    .ul {
    width: 100%;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search