I am encountering an issue while trying to create a navigation bar or header. The problem lies in centering an h1 element. Here is the HTML code I am using:
body {
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2%;
}
nav {
display: flex;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
li {
margin-right: 10px;
}
h1 {
margin: 0;
text-align: center;
flex-grow: 1;
}
button {
display: inline-block;
}<header>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
<h1>SalonM</h1>
<button>Button</button>
</header>Just to clarify, my intention is not to center the h1 element relative to the header, but rather to center it with respect to the screen.
Any suggestions on resolving this issue?