How can I center my logo in the navbar? I've attempted to use mx-auto with Bootstrap 4 Utilities, but it didn't work. It seems like I need to set up some flexbox properties, but I'm not sure which ones to use due to the messy code structure.
Although I admit this might not be the best way to create a navbar, I chose this approach for better responsiveness, even though it needs to be optimized.
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;600;700;800;900&display=swap');
* {
box-sizing: border-box;
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html,
body {
background: #fff;
color: #191919;
height: 110vh;
font-family: 'Nunito Sans', sans-serif;
}
#logo {
max-width: 100px;
display: inline-block;
}
.nav {
...
Apologies for any language errors in my query.