page-header 100 % width not working

Question

CSS

.page-header{
    background: #393e4f;
    width: 100%;
    height:50px;
    margin: 0 auto;
}

HTML

 <div class="container">
    <div class="page-header"><span>XYZ</span></div>
    </div>

I want my page-header to be 100 % width of the page.

I am getting this result which I don't want.

Thank You.

Edited my code try below my code – Rinto Antony Aug 02 '16 at 08:43 — Rinto Antony, Aug 02 '16 at 08:43
It is default padding of bootstap remove padding – Rinto Antony Aug 02 '16 at 08:47 — Rinto Antony, Aug 02 '16 at 08:47

Mridul Kashyap · Answer 1 · 2016-08-02T08:20:26.337

1

bootstrap container class adds a margin. if you want to use the header full width, put it out of the container.

check here.

container width is given in this section of bootstrap css.

edited Aug 02 '16 at 08:20

answered Aug 02 '16 at 08:19

Mridul Kashyap

704
1
5
12

sure you can. but it can get messy if you want to use the container class in other pages. – Mridul Kashyap Aug 02 '16 at 08:20
Okay.. Thank you. I ll put it outside. – Bhavin Shah Aug 02 '16 at 08:21
@Leothelion are you sure? compare [this](https://jsfiddle.net/39xqco5k/) and [this](https://jsfiddle.net/39xqco5k/1/) – Mridul Kashyap Aug 02 '16 at 08:27
@Leothelion He's using bootstrap. so you're saying he should keep it in the .container and change the code in bootstrap css or override that class in his own css. to your point, "what if he needs header in container then?" what's the point of putting it in a container if he doesn't want to get the margins? – Mridul Kashyap Aug 02 '16 at 08:31
@Leothelion uh..did you just tell me to leave if i don't agree with your point of view? – Mridul Kashyap Aug 02 '16 at 09:01
@Leothelion ofcourse, that's the gentleman way of handling it. but i'd like to mention a few points here. i did get your point. about everything. but. 1. it's a bad practice to change or override vendor defined code. why? you can **[read here](http://stackoverflow.com/questions/8596794/customizing-bootstrap-css-template)** 2. if you are unable to put forward your point, it's not my problem. 3. you don't get to decide when a leave a conversation(not argument as you said. it's enough to show how childishly you think of criticism) – Mridul Kashyap Aug 02 '16 at 09:08

Antoni Krstic · Answer 2 · 2016-08-02T08:30:55.340

0

Body element on start has default margin. And that is why you have that white space around. In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides Just insert this code into yours.

  body
    {
    width:100%;
    margin:0;
    }

edited Aug 02 '16 at 08:30

answered Aug 02 '16 at 08:28

Antoni Krstic

23
8

I think you are wrong. The problem is that Body "container" has default value of 8px. and he push all child elements inside. Please correct me if i`am wrong. – Antoni Krstic Aug 02 '16 at 08:39
If you only delete .container class the problem still occurs. – Antoni Krstic Aug 02 '16 at 08:56

Rinto Antony · Answer 3 · 2016-08-02T09:08:27.683

-1

Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

edited Aug 02 '16 at 09:08

answered Aug 02 '16 at 08:22

Rinto Antony

297
1
10

@Leothelion Now i edited my above code this will remove the padding – Rinto Antony Aug 02 '16 at 09:11

page-header 100 % width not working

3 Answers3