'How to use position fixed to cover the full screen width?

I am using position: fixed to fix the name of the website at the top of the page however in doing so the div boundary finishes as soon as the text in the div is completed. It's not covering the complete screen length:

<nav class="navbar navbar-light bg-light" style="margin-bottom: 0%; position:fixed;">
  <div style="background-color: bisque; margin-top: 0%;  font-family: Copperplate, Papyrus, fantasy; color: black;  text-align: center;">
    &nbsp;
    <h1><a class="navbar-brand" href="#">Ratnesh Nagi</a></h1> &nbsp;
  </div>
</nav>

This is how it's working with Fixed: This is how it's working with Fixed:

This is how I want it to get fixed at the top: This is how I want it to get fixed at the top

htmlcsscss-position


Solution 1:[1]

Set the right and left property to zero.

You can specify the horizontal position of positioned elements using right and left properties. See the snippet below:

<nav class="navbar navbar-light bg-light" style="margin-bottom: 0%; position:fixed; right: 0; left:0;">
  <div style="background-color: bisque; margin-top: 0%;  font-family: Copperplate, Papyrus, fantasy; color: black;  text-align: center;">
    &nbsp;
    <h1><a class="navbar-brand" href="#">Ratnesh Nagi</a></h1> &nbsp;
  </div>
</nav>

Solution 2:[2]

You can use flex perhaps as an alternative with some other creative CSS

body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.navbar {
  /* force this to full width*/
  align-self: stretch;
  margin-bottom: 1rem;
}

.navbar-content {
  text-align: center;
  background-color: bisque;
  font-family: Copperplate, Papyrus, fantasy;
  color: black;
  /* make it have a size without the &nbsp;*/
  border: 1px solid transparent;
}

.navbar-brand {
  text-decoration: none;
}

.new-thing {
  background-color: #bbdddd;
  /* force this to full width just for fun */
  align-self: stretch;
}
<div class="container">
  <nav class="navbar navbar-light bg-light">
    <div class="navbar-content">
      <h1><a class="navbar-brand" href="#">Ratnesh Nagi</a></h1>
    </div>
  </nav>
  <div class="new-thing">I am next in line</div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Yong
Solution 2 Mark Schultheiss

Related Questions