我正在学习如何使用flexbox创建网站，但在创建标题时遇到了一些问题。
基本上，包裹在<img>元素周围的一个<a>元素比其他元素占据更多的宽度，即使图片本身并没有那么宽。
它看起来是这样的：https://i.stack.imgur.com/8x2fR.png
这是我的HTML代码：
<body>
<div class="main-container">
<div class="header">
<a href="index.html">Home</a>
<a href="order.html">Order</a>
<a href="index.html"><img src="./images/logo.svg" alt="logo"></a>
<a href="#">Checkout</a>
<a href="#">Contact us</a>
</div>
<div class="flowers-inventory">
Flowers Inventory
</div>
<div class="tools-inventory">
Tools Inventory
</div>
<div class="footer">
Footer
</div>
</div>
这是CSS代码：
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main-container{
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header{
display: flex;
background-color: #f4f4f4;
align-items: center;
text-align: center;
justify-content: space-evenly;
flex-wrap: nowrap;
}
.header a{
white-space: nowrap;
text-decoration: none;
font-family: Roboto;
text-transform: uppercase;
font-size: 16px;
color: rgb(224, 170, 205);
}
.header img{
width: 22%;
}
.header .logo{
margin: 0 -40em;
}
您可以在灵活项目中使用flex: 1 0 0;(此处：.header a选择器(
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main-container{
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header{
display: flex;
background-color: #f4f4f4;
align-items: center;
text-align: center;
justify-content: space-evenly;
flex-wrap: nowrap;
}
.header a{
white-space: nowrap;
text-decoration: none;
font-family: Roboto;
text-transform: uppercase;
font-size: 16px;
flex: 1 0 0;
color: rgb(224, 170, 205);
}
.header img{
width: 22%;
}
.header .logo{
margin: 0 -40em;
}<body>
<div class="main-container">
<div class="header">
<a href="index.html">Home</a>
<a href="order.html">Order</a>
<a href="index.html"><img src="https://cdn.clipart.email/2a1b0b49218f3d58c2b6df1630b609d9_free-rectangle-cliparts-download-free-clip-art-free-clip-art-on-_618-361.jpeg" alt="logo"></a>
<a href="#">Checkout</a>
<a href="#">Contact us</a>
</div>
<div class="flowers-inventory">
Flowers Inventory
</div>
<div class="tools-inventory">
Tools Inventory
</div>
<div class="footer">
Footer
</div>
</div>