Why wont my image fit the width of the page?-CodePudding

Im struggling to get my img to fit the width of the window. Each time I get it to completly fit the window horizontally, I get a scroll bar at the bottom of the page. Ive tried setting the width to 100% on all the containers in the webpage and still no luck. If I set the width to 100% of the page it is centered and fills it well however there is still a small margin on either side of the image. Whats the easiest way to get this image to span the width of the webpage?

html {
  background-color: #ebf1be;
  width: 100vw;
}

#navbar {
  display: flex;
  align-items: center;
  background-color: #ebf1be;
  width: 100vw;
  height: 12%;
  position: fixed;
  font-family: 'Fraunces', serif;
  z-index: 2;
}

.nav_bar {
  display: flex;
  align-items: center;
  margin-left: auto;
}

li {
  list-style-type: none;
  margin: 0 3em 0 3em;
  font-family: font-family: 'Fraunces', serif;
}

header {
  width: 100%;
}


/* Main Body CSS....*/

#hero {
  width: 100vw;
  height: 100%;
  position: relative;
  margin-top: 100px;
  z-index: 1;
}

#sticks {
  text-align: center;
}

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&family=Roboto:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
</head>
<header>
  <div id="navbar">
    <img src="https://igp.brightspotcdn.com/dims4/default/2da5411/2147483647/strip/true/crop/155x100 0 0/resize/155x100!/quality/90/?url=http://indigogolf-brightspot.s3.amazonaws.com/clubs/b7/98/2b874bbc421d840887cafd163925/sticks-pub-grille-logo.png">
    <ul >
      <li ><a>Home</a></li>
      <li ><a>Menu</a></li>
      <li ><a>Events</a></li>
      <li ><a>Shop</a></li>
      <li ><a>Contact Us</a></li>
    </ul>
  </div>
</header>

<body>
  <div id="hero_container"><img id="hero" src="https://i.ibb.co/3pH2FDV/resize-hero-img.png" alt="resize-hero-img"></div>
  <h1 id="sticks">Welcome to Sicks Pub & Grill</h1>
</body>

CodePudding user response：

problem

you need to set all of html element width in 100%.
whan you give html width in vw this will be scrolled.

I think this code will help full!

```
<head>
 <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&family=Roboto:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
</head>
<header>
  <div id="navbar">
   <img src="https://igp.brightspotcdn.com/dims4/default/2da5411/2147483647/strip/true/crop/155x100 0 0/resize/155x100!/quality/90/?url=http://indigogolf-brightspot.s3.amazonaws.com/clubs/b7/98/2b874bbc421d840887cafd163925/sticks-pub-grille-logo.png">
  <ul >
   
<li ><a>Home</a></li>
<li ><a>Menu</a></li>
<li ><a>Events</a></li>
<li ><a>Shop</a></li>
<li ><a>Contact Us</a></li>
  </ul>
  </div>
</header>
<body>
  <div id="hero_container"><img id="hero" src="https://i.ibb.co/3pH2FDV/resize-hero-img.png" alt="resize-hero-img"></div>
  
  <h1 id="sticks">Welcome to Sicks Pub & Grill</h1>
</body>

<style>
html {
  background-color: #ebf1be;
  width: 100%;
}
#navbar {
  display: flex;
  align-items: center;
  background-color: #ebf1be;
  width: 100%;
  height: 12%;
  position: fixed;
  font-family: 'Fraunces', serif;
  z-index: 2;
 
}
.nav_bar {
  display: flex;
  align-items:center;
  margin-left: auto;
}
li {
  list-style-type: none;
  margin: 0 3em 0 3em; 
  font-family: font-family: 'Fraunces', serif;
}

header{
  width: 100%;
}
/* Main Body CSS....*/



#hero {
  width: 100%;
  height: 100%;
  position: relative;
  margin-top: 100px;
  z-index: 1;
}

#sticks{
  text-align: center;
}
</style>
```

CodePudding user response：

Most of your CSS is shooting yourself in the foot. Non-explicit widths, avoiding viewport units and margins, and using sane defaults like box-sizing: border-box should make CSS a bit less painful for you:

* {
  box-sizing: border-box;
}

html {
  background-color: #ebf1be;
}

body {
  margin: 0;
  font-family: 'Fraunces', serif;
}

header {
  position: sticky;
  top: 0;
  background-color: #ebf1be;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0.5rem;
  min-height: 12%;
}

nav img {
  padding: 0;
  display: block;
}

.nav_bar {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

li {
  list-style-type: none;
}

#hero {
  width: 100%;
}

#sticks {
  text-align: center;
}

<header>
  <nav>
    <img src="https://igp.brightspotcdn.com/dims4/default/2da5411/2147483647/strip/true/crop/155x100 0 0/resize/155x100!/quality/90/?url=http://indigogolf-brightspot.s3.amazonaws.com/clubs/b7/98/2b874bbc421d840887cafd163925/sticks-pub-grille-logo.png">
    <ul >
      <li ><a>Home</a></li>
      <li ><a>Menu</a></li>
      <li ><a>Events</a></li>
      <li ><a>Shop</a></li>
      <li ><a>Contact Us</a></li>
    </ul>
  </nav>
</header>
<div id="hero_container"><img id="hero" src="https://i.ibb.co/3pH2FDV/resize-hero-img.png" alt="resize-hero-img"></div>
<h1 id="sticks">Welcome to Sicks Pub & Grill</h1>