how to stretch h1 container to match 100% width of parent div-CodePudding

Here is the H1, I want the whitespace to cover 100%

Here is sample of the code with parent and child as well as the current styling

main #main-content-wrapper div {
  padding: 0;
  margin: 0;
}

img {
  border-radius: 8px;
}

.overlay1 {
  position: absolute;
  top: 0;
  right: .1px;
  bottom: 399px;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: all .5s ease-in-out;
  background-color: #088508;
}

.overlay2 {
  position: absolute;
  top: 0;
  right: .1px;
  bottom: 399px;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: all .5s ease-in-out;
  background-color: #088508;
}

.overlay3 {
  position: absolute;
  top: 0;
  right: .1px;
  bottom: 399px;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: all .5s ease-in-out;
  background-color: #088508;
}

.jadePackage1:hover .overlay1 {
  opacity: 1;
  background: rgba(8, 133, 8, 0.53);
}

.rubyPackage1:hover .overlay2 {
  opacity: 1;
  background: rgba(100, 43, 46, 0.53);
}

.sapphirePackage1:hover .overlay3 {
  opacity: 1;
  background: rgba(0, 0, 255, 0.43);
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.jadePackage1 {
  background-image: url("https://placekitten.com/400/300");
  background-size: cover;
  height: 400px;
  width: 300px;
}

ul {
  width: 370px;
}

ul li {
  font-size: 17px;
  text-align: left;
  /*border: 1px dotted black;*/
}

ul.colorOptions {
  list-style-type: decimal;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<main id="main-content-wrapper">
  <div  id="travelPackages">
    <div >
      <div  style="margin-right: 30px; margin-left: 200px; border: 1px solid black;">
        <h1 style="font-size: 20px; background-color: white;display: flex; justify-content: center; margin: auto; padding: 0 100px 0 100px; ">The Jade Package <span>$19.99</span></h1>
      </div>
    </div>
  </div>
</main>

I am attempting to have the header that reads "The Jade" cover 100% of the top of the photo that way it will look like a header on top of a photo and not one placed in the middle of photo.

I have played around with different display sets and widths yet this is the largest I have been able to get it, close but not quite there.

CodePudding user response：

You have a bit of a mess in inline and css styles, so I suggest you to move all styles to css and reorganize it, then you'll have less troubles when you try to add any new style.

As for your question, h1 already takes 100% of available width, but it stops because of wrapper's paddings. You need to remove padding in the wrapper container (.jadePackage1) and it will work — I added inline padding: 0 to it. See attached snippet.

main #main-content-wrapper div {
  padding: 0;
  margin: 0;
}

img {
  border-radius: 8px;
}

.overlay1 {
  position: absolute;
  top: 0;
  right: .1px;
  bottom: 399px;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: all .5s ease-in-out;
  background-color: #088508;
}

.overlay2 {
  position: absolute;
  top: 0;
  right: .1px;
  bottom: 399px;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: all .5s ease-in-out;
  background-color: #088508;
}

.overlay3 {
  position: absolute;
  top: 0;
  right: .1px;
  bottom: 399px;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: all .5s ease-in-out;
  background-color: #088508;
}

.jadePackage1:hover .overlay1 {
  opacity: 1;
  background: rgba(8, 133, 8, 0.53);
}

.rubyPackage1:hover .overlay2 {
  opacity: 1;
  background: rgba(100, 43, 46, 0.53);
}

.sapphirePackage1:hover .overlay3 {
  opacity: 1;
  background: rgba(0, 0, 255, 0.43);
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.jadePackage1 {
  background-image: url("https://placekitten.com/400/300");
  background-size: cover;
  height: 400px;
  width: 300px;
}

ul {
  width: 370px;
}

ul li {
  font-size: 17px;
  text-align: left;
  /*border: 1px dotted black;*/
}

ul.colorOptions {
  list-style-type: decimal;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<main id="main-content-wrapper">
  <div  id="travelPackages">
    <div >
      <div  style="margin-right: 30px; margin-left: 200px; border: 1px solid black; padding: 0">
        <h1 style="font-size: 20px; background-color: white;display: flex; justify-content: center; padding: 0 100px 0 100px; ">The Jade Package <span>$19.99</span></h1>
      </div>
    </div>
  </div>
</main>

CodePudding user response：

You can add tis rule....

.row > .jadePackage1 {
  padding: 0;
}

...to reset the default padding applied by bootstrap to the parent container of that h1.

main #main-content-wrapper div {
  padding: 0;
  margin: 0;
}

img {
  border-radius: 8px;
}

.overlay1 {
  position: absolute;
  top: 0;
  right: .1px;
  bottom: 399px;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: all .5s ease-in-out;
  background-color: #088508;
}

.overlay2 {
  position: absolute;
  top: 0;
  right: .1px;
  bottom: 399px;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: all .5s ease-in-out;
  background-color: #088508;
}

.overlay3 {
  position: absolute;
  top: 0;
  right: .1px;
  bottom: 399px;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: all .5s ease-in-out;
  background-color: #088508;
}

.jadePackage1:hover .overlay1 {
  opacity: 1;
  background: rgba(8, 133, 8, 0.53);
}

.rubyPackage1:hover .overlay2 {
  opacity: 1;
  background: rgba(100, 43, 46, 0.53);
}

.sapphirePackage1:hover .overlay3 {
  opacity: 1;
  background: rgba(0, 0, 255, 0.43);
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.jadePackage1 {
  background-image: url("https://placekitten.com/400/300");
  background-size: cover;
  height: 400px;
  width: 300px;
}

ul {
  width: 370px;
}

ul li {
  font-size: 17px;
  text-align: left;
  /*border: 1px dotted black;*/
}

ul.colorOptions {
  list-style-type: decimal;
}
.row > .jadePackage1 {
  padding: 0;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<main id="main-content-wrapper">
  <div  id="travelPackages">
    <div >
      <div  style="margin-right: 30px; margin-left: 200px; border: 1px solid black;">
        <h1 style="font-size: 20px; background-color: white;display: flex; justify-content: center; margin: auto; padding: 0 100px 0 100px;">The Jade Package <span>$19.99</span></h1>
      </div>
    </div>
  </div>
</main>

CodePudding user response：

It's almost always a bad idea to muck around with Bootstrap's grid (containers, rows, and columns). Don't put custom margin and padding on them. Definitely don't use specific widths. That just breaks everything. Stop using inline styles, even for development. If you need to experiment, do it in the browser inspector and then put it on a custom class.

I might create a custom class and pull that column's content out past the column padding. Leave the grid alone.

.jadePackage1 {
  background-image: url("https://placekitten.com/400/300");
  background-size: cover;
  border: 1px solid black;
  min-height: 150px;
}

h1 {
  font-size: 20px;
  background-color: white;
  display: flex;
  justify-content: center;
  margin: auto;
  padding: 0 100px 0 100px;
}

.w-100-in-col {
  margin-left: -12px;
  margin-right: -12px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<main id="main-content-wrapper">
  <div  id="travelPackages">
    <div >
      <div >
        <h1 >The Jade Package <span>$19.99</span></h1>
      </div>
    </div>
  </div>
</main>

My best advice you you right now is to strip out as much of your styling as you can related to Bootstrap elements. Work with the library, not against it, and only style your grid content unless there's no other way.