Phenomena img tags and nav tags are not justified.

Expected value I want to be both ends aligned the img and nav tags.

Steps to reproduce Run the code below, please.

.header {
    .header__wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 960px;
        height: 60px;
        padding: 0px 76.1095px;
        margin: 0px 471.5px;
        justify-content: space-evenly;
        img {
             /* omitted */
        }
        nav {
　　　　　　　 /* omitted */
                .header__nav-link {
　　　　　　　　　/* omitted */
                }
            }
            .header__nav-li_bicycle {
                list-style: none;
                width: 74.695px;
                .header__nav-link_bicycle {
                /* omitted */
                }
            }
        }
    }
}

<header >
        <div >
                <img  src="image/logo.svg" alt="プロフィール">
            <nav >
                <li ><a href="" >About</a></li>
                <li ><a href="" >Bicycle</a></li>
            </nav>
        </div>
</header>

CodePudding user response：

You can try using the following pure CSS to achieve your desired result. I added a few flex-boxes and aligned the items so they are space roughly the same as your image. See the CSS changes below.

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 960px;
  justify-content: space-evenly;
  width: 100%;
}

li {
  list-style-type: none;
}

ul {
  display: flex;
  gap: 20px;
}

.header__wrapper {
  display: flex;
  align-items: center;
  gap: 30vw;
}

<header >
  <div >
    <img  src="image/logo.svg" alt="プロフィール">
    <nav >
      <ul>
        <li ><a href="" >About</a></li>
        <li ><a href="" >Bicycle</a></li>
      </ul>
    </nav>
  </div>