Create an element that spans the entire width of the page

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

Answer №1

.navigation-bar {
    justify-content: space-around;
    align-items: center;
    flex: 0 0 100%;
}

Answer №2

I may not be a React expert, but when it comes to CSS, it seems like the issue might lie with the margins. Personally, I always set margin: 0px; and padding: 0px; on the body to ensure I have full control over the spacing.

Also, I suggest taking a closer look at these two lines in the .navbar:

width: 46vw;
left: 13vw;

You might want to consider changing width: 100%; and removing the left property, or setting it to left: 0px; instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue encountered in the express route when attempting to send an email to the user with nodemailer and reactjs

When attempting to send an email to the user who submitted the application using ReactJS and Nodemailer, an error stating "route not found" is encountered. Warning: Location "/contact?name=milan&email=xedikaka%40gmail.com&phone=9843698469&city ...

Divide the array of words into segments based on the maximum character limit

I am looking for a way to divide an array of words into chunks based on a maximum number of characters: const maxChar = 50 const arrOfWords =['Emma','Woodhouse,','handsome,','clever,','and','rich,&apo ...

What could be the reason for StaticComponent constantly re-rendering despite having a static state that does not change

I'm trying to grasp the core concepts of how React triggers component re-rendering upon state changes. In the scenario described below, the console.log('hi') statement within the StaticComponent is executed every time the onChange event han ...

Issue with popup display in React Big Calendar

I'm currently working on a calendar project using React-Big-Calendar, but I've run into an issue with the popup feature not functioning properly. <div className={styles.calendarContainer} style={{ height: "700px" }}> <C ...

How to properly fill state values for testing components with React Testing Library?

Introducing my custom component -> export default() => { const [list, setList] = useState([]) const handleAddToList = () => { // Executes an API call and updates the list state. setList(response); } return ( <div> ...

The strict mode in React reveals unexpected changes in state with double rendering

While working with React, I've noticed that it renders twice in Strict mode during development to ensure the function remains pure without any side effects. However, I'm facing some inconsistency in retrieving the state in my case. It seems like ...

Managing an extensive JSON file

With plans to create a project showcasing "UFO" sightings, I initially aimed to find an API for this but came up empty-handed. However, I stumbled upon a substantial 33mb JSON file containing reports of UFO sightings with over a million lines of code. Now, ...

Steps for including a header and footer with page numbers in an HTML page without disrupting the rest of the content when printing

When I print a page with a table that spans multiple pages, I want to ensure that my header and footer are included on every page. The code I've tried so far has treated the entire content as one continuous page. How can I achieve this? ...

The use of the `/deep/` combinator in CSS has been phased out and is set to be completely removed

After updating my angular to version 4.0.0 and chrome to 62.0.3202.94, I encountered the following error message: [Deprecation] /deep/ combinator in CSS is deprecated and will be removed in M63, around December 2017. Refer to for more information. The ...

Unable to modify the state within the header of a Material Table while utilizing remote data sources

My custom header contains a simple boolean state that I plan to use to control a dropdown menu. I have implemented an onClick function on this custom header to toggle the state and then log it, but the state remains unchanged after each click. The issue a ...

Surprising margin discrepancy of 10px found while utilizing float property in CSS

Encountered an issue with the CSS property "float". There is a 10px margin at the top of the page. How can this be fixed? I tried adding an empty div to the parent div with id="background1", but it did not work. I also found this article https://css-trick ...

Is there a way in React to specifically listen for changes in just one variable among several, without interfering with the other variables?

As I delve into using functional React to create my hobby website, I consistently encounter the following scenario: const [randomData, setRandomData] = useState(true); const [activePopup, setActivePopup] = useState(1); useEffect(() => { ... con ...

Troubleshooting Problem with Accordion Size in CSS

I am facing an issue with a dropdown menu that I have created. The dropdown has parent and child rows to display controls, but the width of the Accordion is not stretching as expected despite being set to 100%. Using Chrome and Edge developer tools, I insp ...

Encountering an Uncaught TypeError when attempting to set properties of null with useRef

I've been working on an app that requires access to the user's device camera in order to display live video on the screen. I've managed to achieve this by utilizing a video HTML Object and setting the media stream as its srcObject. Everythin ...

Setting up custom fonts in MUI v5: A step-by-step guide

I have the following: const theme = initiateTheme({ typography: { allTypes: CustomFont, fontFamily: 'CustomFontStyle' } as TypographyStyles, components: { MuiFormControl: { styleUpdates: { root: { fontFam ...

Error: Attempting to access properties of an undefined variable in React JS, specifically trying to read 'map'

I'm having trouble with "whotofollow.map" in my ReactJS code and keep getting errors. Check out my code snippet below: import React from 'react' import { news, whoToFollow } from '../library/static' import { BiSearch } from ' ...

Modified the proxy settings in Create-React-App to circumvent CORS blocking, but now encountering an undefined response

After implementing a workaround for CORS blocking requests in Create-React-App, I am encountering some issues. Following the recommendation, I updated the proxy settings in my package.json file to point to the same domain I am trying to call, using dummy ...

Customize the <td> column based on values and rows. Modify the current jQuery code

This code snippet contains an HTML table that dynamically populates based on the dropdown selection. The script included in the code highlights the best and worst values in the table by changing their background color to green and red, respectively. & ...

Having trouble with resolving 'react-transition-group' in MUI IconButton?

I can't seem to shake this persistent error: ./node_modules/@mui/material/ButtonBase/TouchRipple.js Module not found: Can't resolve 'react-transition-group' in '#/node_modules/@mui/material/ButtonBase' I've diligently fo ...

Loading items into the select menu

In my database, I have a table with 3 columns: ID, TITLE, TEXT. These will be used to populate select options in a form. When a user makes a selection, a script will take the title and text, make some adjustments, and store it in a different table. My que ...