Polymer Paper Toolbar ignores body margin

I am using Polymer 1.0 to create a paper-toolbar and a search on a card beneath it. The plan was that the toolbar and the card both are position:fixed so i put them into a div. The problem now that i get is, that the toolbar is a bit too long to the right so that it stretches over the bodys margin. I tried auto margin but it did not work

Here is my code

<!doctype html>
<html>
  <head>
   <!-- 1. Load webcomponents-lite.min.js for polyfill support. -->
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js">
    </script>

    <!-- Polymer Elements -->
    <link rel="import" href="bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="bower_components/paper-input/paper-input.html">
    <link rel="import" href="bower_components/paper-card/paper-card.html">
    <link rel="import" href="bower_components/iron-input/iron-input.html">
     <link rel="import" href="bower_components/iron-input/iron-input.html">
     <link rel="import" href="bower_components/paper-styles/paper-styles.html">



    <meta charset="utf-8">
    <title>FreeLV FreifachCommunity</title>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/jquery-scrollstop-master/jquery.scrollstop.min.js"></script>
    <script src="js/main.js"></script>
    <link rel="stylesheet" href="css/main.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  </head>


  <body unresolved>
    <div id="HeaderContainer" flex>

      <div id="OuterToolBarContainer">
      <paper-toolbar id="ToolBar">
      <div id="ToolbarContainer">
        <div style="float:left;">
          <paper-icon-button icon="menu"></paper-icon-button>
        </div>
        <div style="float:right;">
          <paper-icon-button icon="more-vert"></paper-icon-button>
        </div>
      </div>
      </paper-toolbar>
      </div>

      <div id="SearchBarContainer">
      <paper-card id="SearchBar" animatedShadow="true" elevation="1">
            <paper-input-container no-label-float id="SearchInput">
              <paper-icon-button prefix icon="search"></paper-icon-button>
                <label>Search...</label>
                <input is="iron-input"></input>
              <paper-icon-button suffix icon="clear"></paper-icon-button>
            </paper-input-container>
      </paper-card>
      </div>

    </div>


    <div id="Content">
    <paper-card>

    </paper-card>
    </div>

  </body>
</html>

CSS

.center {
  text-align: center;
}

body {
  background-image: url(../img/diamond_upholstery.png);
  background-repeat: :repeat;
}

.center {
  margin-left: auto;
  margin-right: auto; 
}

#SearchBarContainer {
  width: 100%;
  height: 7em;
}

#SearchBar {
  margin-top: 1em;
  position: fixed;
}

#SearchInput label{
  font-size: 25px;
}

#SearchInput input{
  font-size: 25px;
}

#ToolbarContainer {
  width: 100%;
}

#HeaderContainer {
  width:100%;
  position: fixed;
}

#Content {
  height: 100em;
  width: 100%;
}

Its my first Question here so i cant post images.. a link will do i hope https://i.sstatic.net/FCbqd.jpg

Solution

This is not really related to Polymer or the paper toolbar, but it is a general CSS problem.The relevant element here is the HeaderContainer and not the paper toolbar. When you set an element to position fixed it is taken out of the document flow. This means that the width of 100% of the HeaderContainer is interpreted relative to the document and not the parent (in this case the body). You can set the width to inherit in order to take over the width of the parent. However, this means that you first have to set a width in your body.

body {
    width: calc(100% - 16px);
}

#HeaderContainer {
    width:inherit;
    position: fixed;
}

I've set the width of the body to 100% - 16px to account for the typical 8px margin in most browser.