[ad_1]
Asked
Viewed
7 times
I almost started learning html and css and js and I started making a simple project as a portfolio site.
I have a problem with navigation, since the logo (h1) is not the same length as the button (Download CV) items in the middle are not centered, is there any option to reduce the left side but without padding or margins
.header {
position: fixed;
width: 100%;
top: 0;
right: 0;
z-index: 50;
padding: 0 100px 0 100px;
border-bottom: var(--header-bottom-line);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-height);
background-color: var(--color-background-nav);
-webkit-backdrop-filter: blur(10px);
padding: 0 7%;
}
.logo {
font-size: var(--nav-logo-font-size);
display: inline-flex;
justify-content: center;
font-weight: var(--font-small);
line-height: 11px;
height: 11px;
color: var(--color-nav-menu)
}
.logo_logo {
color: rgba(127, 15, 161, 0.96);
padding-left: 5px;
}
.nav-menu {
display: flex;
}
.nav-menu li {
position: relative;
display: inline-flex;
}
.nav-menu a {
color: var(--color-nav-menu);
font-weight: var(--font-small);
font-size: var(--nav-text-font-size);
padding: 10px 50px;
text-align: center;
}
#menu-icon {
font-size: 30px;
color: var(--color-nav-menu);
cursor: pointer;
z-index: 10001;
display: none;
}
.nav-btn {
font-size: var(--nav-logo-font-size);
display: inline-flex;
justify-content: center;
font-weight: var(--font-small);
line-height: 11px;
height: 11px;
color: #000;
} <header class="header">
<nav class="nav">
<a href="#" target="_blank" class="logo">Slobodan <span class="logo_logo">Živanović</span></a>
<div class="bx bx-menu" id="menu-icon"></div>
<ul class="nav-menu">
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<a href="#" target="_blank" class="nav-btn">Download CV</a>
</nav>
</header>
Crystal
1,4301 gold badge2 silver badges11 bronze badges
asked 7 mins ago
lang-html
[ad_2]