Я изучаю, как создать веб-сайт с помощью flexbox, и у меня возникают некоторые проблемы с созданием заголовка.
По сути, один элемент <a>, который охватывает элемент <img>, занимает гораздо больше ширина, чем другие элементы, хотя само изображение не так широко.
Вот как это выглядит: https://i.imgur.com/nEpI4xW.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;
}