css - Why is a 95% width h1 not as wide as a 95% fixed div? -

short version

why 95% width h1 not wide 95% fixed div?

and can make h1 same width (whilst maintaining fixed property of div)?

#mobile_wrapper {    background: #000;    display: block;    position: fixed;    width: 95%;    white-space: nowrap;    z-index: 5;    box-sizing: border-box;    top: 0;    left: 0;  }  #mobile_menu {    background: aqua;    float: left;    display: inline-block;    position: static;    box-sizing: border-box;    width: 60px;  }  #mobile_logo {    background: red;    float: left;    display: inline-block;    position: static;    box-sizing: border-box;    width: calc(100% - 120px);    text-align: center;  }  #mobile_logo img {    max-width: 100%;    vertical-align: bottom;  }  #mobile_cart {    width: 60px;    background: green;    float: left;    display: inline-block;    position: static;    box-sizing: border-box;    margin: 0;    padding: 0;    text-align: right;  }  #mobile_cart li {    display: inline;    list-style: none;  }  h1 {    width: 95%;    background: gold;    display: inline-block;    position: static;    box-sizing: border-box;    margin-top: 50px;    text-align: center;  }

<div id="mobile_wrapper">    <div id="mobile_menu">      menu    </div>    <div id="mobile_logo">      <img src="http://lorempixel.com/image_output/technics-q-c-150-50-6.jpg">    </div>    <ul id="mobile_cart">      <li>i</li>      <li>i</li>    </ul>  </div>  <h1>  title  </h1>

jsfiddle

https://jsfiddle.net/rwone/mqqytqwe/

long version

i've been working through number of * learning opportunities * in process of completing simple task - creating fixed header area mobile viewing.

to satisfying degree, i've learnt about:

• floating:
  https://youtu.be/xara4z1b18i

• positioning (static, relative, absolute, fixed, inherit):
  http://alistapart.com/article/css-positioning-101

• why inline-blocks have space between them:
  https://css-tricks.com/fighting-the-space-between-inline-block-elements

• box-sizing:
  http://blog.teamtreehouse.com/box-sizing-secret-simple-css-layouts

where padding , borders included in elements width, rather added it:

image source: teamtreehouse.com

and it's cool can view lot of these things in layout tab of firebug:

but haven't been able apply knowledge of these areas understand:

why 95% width h1 not wide 95% fixed div?

and can make h1 same width (whilst maintaining fixed property of div)?

first positioned relatively html , second body. fix is:

body {   margin: 0; } 

body {    margin: 0;  }    #mobile_wrapper {    background: #000;    display: block;    position: fixed;    width: 95%;    white-space: nowrap;    z-index: 5;    box-sizing: border-box;    top: 0;    left: 0;  }  #mobile_menu {    background: aqua;    float: left;    display: inline-block;    position: static;    box-sizing: border-box;    width: 60px;  }  #mobile_logo {    background: red;    float: left;    display: inline-block;    position: static;    box-sizing: border-box;    width: calc(100% - 120px);    text-align: center;  }  #mobile_logo img {    max-width: 100%;    vertical-align: bottom;  }  #mobile_cart {    width: 60px;    background: green;    float: left;    display: inline-block;    position: static;    box-sizing: border-box;    margin: 0;    padding: 0;    text-align: right;  }  #mobile_cart li {    display: inline;    list-style: none;  }  h1 {    width: 95%;    background: gold;    display: inline-block;    position: static;    box-sizing: border-box;    margin-top: 50px;    text-align: center;  }

<div id="mobile_wrapper">    <div id="mobile_menu">      menu    </div>    <div id="mobile_logo">      <img src="http://lorempixel.com/image_output/technics-q-c-150-50-6.jpg">    </div>    <ul id="mobile_cart">      <li>i</li>      <li>i</li>    </ul>  </div>  <h1>  title  </h1>