Having trouble adjusting the width of the .navbar? It seems to only grow to one side and setting it to 100% width doesn't expand it to fill the whole page. Can anyone provide some guidance or assistance? Here's the code:
return (
<div className={fix ? `${styles.navbar} ${styles.sticky}` : styles.navbar}>
<div className={styles["img-wrapper"]}>
<img className={styles.logo} src={Logo} alt="" />
</div>
<ul className={styles["navbar-links"]}>
<li className={styles["navbar-links__item"]}>
<a>Home</a>
</li>
<li className={styles["navbar-links__item"]}>
<a>About</a>
</li>
<li className={styles["navbar-links__item"]}>
<a>Contact</a>
</li>
</ul>
</div>
);
CSS Code:
.navbar {
display: flex;
align-items: center;
position: relative;
top: 3vh;
width: 46vw;
left: 13vw;
background-color: blue;
}
.img-wrapper {
display: flex;
}
.navbar-links {
display: flex;
font-size: 1.7rem;
}
.navbar-links__item {
margin-inline: 20px;
}
.navbar-links__item:hover {
color: var(--primary-color);
transition: 0.5s;
cursor: pointer;
}