如何拉伸 h1 容器以匹配父 div 的 100% 宽度

Question

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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <main id="main-content-wrapper"> <div class="container-fluid" id="travelPackages"> <div class="row"> <div class="col-12 col-md-6 col-lg-3 jadePackage1" 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.

Answer 1

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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <main id="main-content-wrapper"> <div class="container-fluid" id="travelPackages"> <div class="row"> <div class="col-12 col-md-6 col-lg-3 jadePackage1" 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>

Answer 2

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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <main id="main-content-wrapper"> <div class="container-fluid" id="travelPackages"> <div class="row"> <div class="col-12 col-md-6 col-lg-3 jadePackage1"> <h1 class="w-100-in-col">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.

Answer 3

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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <main id="main-content-wrapper"> <div class="container-fluid" id="travelPackages"> <div class="row"> <div class="col-12 col-md-6 col-lg-3 jadePackage1" 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>