Make an element take 100% the width of a page-CodePudding

I tried to change the .navbar width, and only grows to one side. If i add a 100% width, it will not take the entire page (from the start to the end). Please, help! CODE (JSX):

 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>
  );

CODE (CSS):

.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;
}

CodePudding user response：

If it's not going 100% of the width across, is there a higher level of div that has padding added to it that needs removed? I would check ever div that it's inside to make sure another section isn't adding padding or margin. Do you have a link to the project?

CodePudding user response：

.navbar {
    display: flex;
    flex: 0 0 100%;
}

CodePudding user response：

I'm not fluent in React. But if it's CSS, perhaps you have problems with margins. I usually add margin: 0px; and padding: 0px; on body when I want all the space.

Plus, I would check those 2 lines of .navbar:

width: 46vw;
left: 13vw;

Perhaps you should change in width: 100%; and remove left, or put it to left: 0px; instead.