How do I make this div span the entire width?

Question

I have already included this:

<style>
html, body {
    padding: 0;
    margin: 0;
    font-family: Segoe UI;
}
</style>

And below is my code for the div I am referring to including its content:

<div class="learn-more">
  <div class="container">
  <div class="row">
    <h1 style="color: #292f33;">SERVICES</h1>
    <div class="col-md-4">
      <h4>Delivery</h4><hr style="max-width: 70px;">
      <p style="text-align: center; font-size: 19px; font-family: Segoe UI;">At Gadget Market we offer free delivery for purchases prized over $300. Our delivery service is up to your doorstep or wherever you would like within the country.</p>
    </div>

    <div class="col-md-4">
      <h4>Warranty</h4><hr style="max-width: 70px;">
      <p style="text-align: center; font-size: 19px; font-family: Segoe UI;">Devices from Gadget Market come with not less than a 12-month warranty. Gadget issues within this period will be catered for and a replacement provided if need be.</p>
    </div>

    <div class="col-md-4">
      <h4>Money back Guarantee</h4><hr style="max-width: 70px;">
      <p style="text-align: center; font-size: 19px; font-family: Segoe UI;">If you are not satisfied with the product you bought from Gadget market, then you can return the gadget to us within 30 days for a 90% money back guarantee.</p>
    </div>

    </div>
</div>
</div>

And here is the CSS:

.learn-more {
  background-size: cover;
  width: inherit; 
  margin: 0;
  padding: 0; 
  background-color: rgba(85,172,238,0.8); 
}

.learn-more .col-md-4 h4 {
    font-family: Cambria;
    font-size: 26px;
    text-align: center;
    color: #292f33;
}

.learn-more .col-md-4 p {
    font-family: Segoe UI;
    font-size: 19px;
    text-align: center;
    color: #292f33;
}

However the div .learn-more still doesn't span the entire width. And I find this to be weird because I used the exact same code on another project and it worked!

And the link below is the image:

The result

Hi there - can you help us which div is "the div"? You've got about 6 divs in the markup above. Additionally, can you advise the other styles, particularly for `div.learn-more` and `div.container`? — random_user_name, May 16 '16 at 23:07

score 2 · Answer 1 · edited May 23 '17 at 10:32

2

This is a Bootstrap matter. Change this

<div class="container">

to this

<div class="container-fluid">

And (to prevent a horizontal scrollbar) change the <div class="learn-more"> into a <section class="learn-more">, as per this post:

https://stackoverflow.com/a/35236594/1447509

Note that typical Bootstrap scaffolding looks like this:

<body>
    <section>
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12 col-md-4">
                    //content
                </div>
                <div class="col-xs-12 col-md-4">
                    //content col 2
                </div>
            </div><!-- .row -->
            <div class="row">
                <div class="col-xs-12 col-md-4">
                    //content
                </div>
                <div class="col-xs-12 col-md-4">
                    //content col 2
                </div>
            </div><!-- .row -->
        </div><!-- .container -->
    </section>
</body>

edited May 23 '17 at 10:32

Community

1
1

answered May 16 '16 at 23:14

cssyphus

37,875
18
96
111

This is a known bootstrap situation. Keep playing around with this - I'm betting your problem is related to it. Try adjusting your HTML structure to be more like the scaffolding I just added to my updated answer. – cssyphus May 16 '16 at 23:30
What's pissing me off is the fact that on a different website project, it works perfectly! – Andrea Tand May 16 '16 at 23:49
Is that common too? With no alterations or anything...it works! – Andrea Tand May 16 '16 at 23:50
Are you saying that it is working now, or still having trouble? If still trouble, try reproducing the problem on [bootply](http://bootply.com) and post the link. We'll keep trying to help you fix it. – cssyphus May 16 '16 at 23:53
You can also try changing `
` to `
`. Worth a shot...
– cssyphus May 16 '16 at 23:55
I meant it hasn't worked yet. I have the code on pastebin, is that okay? Can I share that link? – Andrea Tand May 17 '16 at 00:06
Yes, share the link, but add it to your original question also so that others can also see it easily. – cssyphus May 17 '16 at 00:08
[link] (pastebin.com/A4LkJQ26 – Andrea Tand May 17 '16 at 00:08
One of the divs wasn't terminated, Thanks a lot though – Andrea Tand May 17 '16 at 00:35

score 1 · Answer 2 · answered May 16 '16 at 23:08

1

Make a style code for the div that sets the width at 100%

.learn-more {
  width:100%;
}

answered May 16 '16 at 23:08

Sub 6 Resources

1,674
15
31

It appears like your div is inheriting its width from the parent element. What element is the parent of the div, and what styles does it have? – Sub 6 Resources May 16 '16 at 23:14
Oh sorry, no it isn't. That was supposed to be 'width: 100%;' and I have changed it but it still doesn't work. – Andrea Tand May 16 '16 at 23:26

Dezefy · Answer 3 · 2016-05-16T23:22:48.933

1

Please try

.learn-more,.learn-more .container{
  width : 100%;
  display: block;
}

edited May 16 '16 at 23:22

answered May 16 '16 at 23:17

Dezefy

2,048
1
14
23

Can you put your codes online and give me the link. I will solve in 1 minute. – Dezefy May 16 '16 at 23:26
One of the divs wasn't terminated. Thanks a lot though – Andrea Tand May 17 '16 at 00:34
Sorry I wasn't able to give enough time to the problem, but very happy to hear you resolved it. – cssyphus May 17 '16 at 01:33

score 0 · Answer 4 · answered May 16 '16 at 23:28

0

You need to remove the inherit characteristic. width: inherit gives 100% of the parent. Not the whole document. To ignore the typical restrictions on width being more than the parent, do the below.

.learn-more{
  position: absolute;
  width: 100%;
}

answered May 16 '16 at 23:28

David Archibald

1,431
14
27

I'm not going to put this as an answer, unless if works, but remove the h1, and if that doesn't work remove all the children of learn-more, at least this way we know where the problem is. If one works, tell me and I'll edit the answer. – David Archibald May 16 '16 at 23:43

score 0 · Answer 5 · edited Nov 16 '16 at 06:46

0

I suggest adding !important for padding and margin to the selector html, body like this:

html, body {
  padding: 0 !important;
  margin: 0 !important;
  font-family: Segoe UI;
}

As in your screenshot, I can see scrollbar is at the bottom so you are having more divs on top and probably more CSS, so if something is changing padding and margin value then it gets corrected now. You should also check if your divs are closing properly and don't have any unclosed div prior to your code, then try adding overflow:hidden to .learn-more.

edited Nov 16 '16 at 06:46

David Archibald

1,431
14
27

answered May 16 '16 at 23:43

Rakesh

66
3

Rakesh, you must have seen wrong. I do not have a scrollbar at the bottom – Andrea Tand May 16 '16 at 23:45
One of the divs had not been terminated. Thanks! – Andrea Tand May 17 '16 at 00:33
Sorry i said it wrong, your vertical scrollbar was scrolled to bottom. I didn't mean there is horizontal scrollbar at bottom. Glad it helped! – Rakesh Feb 28 '17 at 05:53

How do I make this div span the entire width?

5 Answers5