How to use position fixed to cover the full screen width?-CodePudding

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  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  href="#">Ratnesh Nagi</a></h1> &nbsp;
  </div>
</nav>

This is how it's working with Fixed:

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

CodePudding user response：

use 100vw

nav{
  width = 100vw;
}

body{
  height: 200vh;
  background-image: linear-gradient(red, yellow);
}

nav {
  position: fixed;
  top:0;
  left:0;
  width:100vw;
  /*  extra  */
  height: 50px;
  background: red;
  margin-bottom: 0%;
}

.nagi{
  background-color: bisque;
  font-family: Copperplate, Papyrus, fantasy;
  color: black;
  text-align: center;
}

<body>
  <nav>
    <div >
      &nbsp;
      <h1>
        <a href="#">Ratnesh Nagi</a>
      </h1> &nbsp;
    </div>
  </nav>
</body>

CodePudding user response：

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 >
  <nav >
    <div >
      <h1><a  href="#">Ratnesh Nagi</a></h1>
    </div>
  </nav>
  <div >I am next in line</div>
</div>