Is it possible to center all tags except for the img without using margins or paddings?
header {
display: flex;
flex-direction: column;
align-items: center;
}
.logo {
border-radius: 50%;
width: 100px;
height: 100px;
margin: 10px 0 0 10px;
}
/* The issue arises here */
.main-menu ul {
display: flex;
flex-direction: row;
align-items: center;
gap: 30px;
list-style: none;
}<header>
<div class="nav">
<img src="logo.jpg" alt="Logo" class="logo">
<nav class="main-menu">
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
</ul>
</nav>
</div>
<div class="title">
<h1>Hi, we are <span>Lorem ipsum dolor</span>.<br>consectetur adipisicing elit.</h1>
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
</div>
<div class="button">
<button type="button">button1</button>
<button type="button">button2</button>
</div>
</header>