Text within span pushing buttons to the right [duplicate] - html

Question

This question already has answers here:
How can I align one item right with flexbox?
(5 answers)
How to center-align one flex item and right-align another using Flexbox [duplicate]
(2 answers)
Center one and right/left align other flexbox element
(11 answers)
Closed 1 year ago.
I am trying to build a navbar with a logo to left and some buttons in the middle, but i have some trouble putting the logo. The span with the text is attaching right next to my buttons and if i take it out of my nav the logo is too far to the right and pushing my buttons to the left. This is the CSS:
:root {
--nav-button-color: #ffc300;
--nav-button-transparent: #ffc40093;
--font-color-unselected: #737373;
--font-color-selected: #fff;
--roboto: "Roboto", sans-serif;
--poppins: "Poppins", sans-serif;
--font-bold-600: 600;
--font-bold-700: 700;
--font-bold-800: 800;
--font-bold-900: 900;
}
* {
font-family: var(--roboto);
}
.navigation {
display: flex;
justify-content: center;
}
.btn {
margin: 5px;
width: 110px;
height: 30px;
border: none;
}
.btn-nav {
width: auto;
height: auto;
color: var(--font-color-unselected);
font-size: 16px;
font-weight: var(--font-bold-600);
padding: 10px 15px;
border-radius: 5px;
background: none;
transition: 0.4s;
cursor: pointer;
}
.btn-nav-selected {
color: var(--font-color-selected);
background-color: var(--nav-button-color);
}
.logo {
font-family: var(--poppins);
color: var(--font-color-unselected);
font-weight: var(--font-bold-800);
font-size: 30px;
}
/*=============================*/
.btn-nav:hover {
color: var(--font-color-selected);
background-color: var(--nav-button-transparent);
}
<div class="nav-container">
<nav class="navigation">
<span class="logo">Logo</span>
<button class="btn btn-nav btn-nav-selected">Home</button>
<button class="btn btn-nav">Shop</button>
<button class="btn btn-nav">What We Do?</button>
</nav>
</div>

Answer 1

You can try with css grid:
:root {
--nav-button-color: #ffc300;
--nav-button-transparent: #ffc40093;
--font-color-unselected: #737373;
--font-color-selected: #fff;
--roboto: "Roboto", sans-serif;
--poppins: "Poppins", sans-serif;
--font-bold-600: 600;
--font-bold-700: 700;
--font-bold-800: 800;
--font-bold-900: 900;
}
* {
font-family: var(--roboto);
}
.navigation {
display: grid;
grid-template-columns: auto 1fr;
justify-items: center;
align-items: center;
}
.btn {
margin: 5px;
width: 110px;
height: 30px;
border: none;
}
.btn-nav {
width: auto;
height: auto;
color: var(--font-color-unselected);
font-size: 16px;
font-weight: var(--font-bold-600);
padding: 10px 15px;
border-radius: 5px;
background: none;
transition: 0.4s;
cursor: pointer;
}
.btn-nav-selected {
color: var(--font-color-selected);
background-color: var(--nav-button-color);
}
.logo {
font-family: var(--poppins);
color: var(--font-color-unselected);
font-weight: var(--font-bold-800);
font-size: 30px;
justify-self: flex-start;
}
/*=============================*/
.btn-nav:hover {
color: var(--font-color-selected);
background-color: var(--nav-button-transparent);
}
<>
<div class="nav-container">
<nav class="navigation">
<span class="logo">Logo</span>
<div class="menu">
<button class="btn btn-nav btn-nav-selected">Home</button>
<button class="btn btn-nav">Shop</button>
<button class="btn btn-nav">What We Do?</button>
</div>
</nav>
</div>
</>