position: fixed problem

HTML

<body id="top" class="page-blog">

  <div class="header">
    <div class="center titles">
      <h1 class="title">Atoav</h1>
      <!-- <img class="logo" src="/user/themes/atoav/images/headerlogo_rect.png"/> -->
      <div id="logo">
        <div class="logo-element" id="logo-circle"></div>
        <div class="logo-element" id="logo-bar-top"></div>
        <div class="logo-element" id="logo-bar-bottom"></div>
        <div class="logo-element" id="logo-bottom"></div>
        <div class="logo-element" id="logo-pillar"></div>
      </div>
      <h2 class="subtitle">David Huss</h2>
    </div>
    <nav class="menu navigation">

      <ul>
        <li class="">
          <a href="/about">
                                        about
                </a>
        </li>
        <li class="selected">
          <a href="/blog">
                                        blog
                </a>
        </li>
        <li class="">
          <a href="/works">
                                        works
                </a>
        </li>

      </ul>

    </nav>
  </div>

  <section id="body">
    <div class="center sitecontent">

      <div class="blog-header">

      </div>

      <div class="content-wrapper blog-content-list grid pure-g">
        <div id="listing" class="block pure-u-2-3 h-feed">
          <div class="list-item h-entry">


            <div class="list-blog-header">
              <span class="list-blog-date">
            <time class="dt-published" datetime="2017-08-06T21:43:58+02:00">
                <span>2 days ago</span>
              </time>
              </span>
              <h4 class="p-name"><a href="/blog/an-alternative-to-dying-is-here" class="u-url">An alternative to dying is here</a></h4>

              <span class="tags">
                        <a href="/blog/tag:General" class="p-category">General</a>
                        <a href="/blog/tag:Test" class="p-category">Test</a>
                    </span>


            </div>

            <div...

CSS

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

body {
  width: 100%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}


/* GLOBAL TEXT STYLING */

body {
  font-family: robotolight;
  font-size: 1rem;
}

body,
p {
  font-family: roboto;
}

a {
  font-family: robotolight;
  text-decoration: none;
  color: rgba(100, 100, 100, 0.8);
}

a:hover {
  text-decoration: underline;
  color: rgba(250, 70, 100, 0.9);
}

html {
  font-size: 14px;
}

@media screen and (min-width: 799px) {
  html {
    font-size: 18px;
  }
}

@media screen and (min-width: 1200px) {
  html {
    font-size: 20px;
  }
}


/*  HEADER */

.header {
  width: 100%;
  height: 8em;
  font-family: robotolight;
  background: -moz-linear-gradient(top, rgba(248, 250, 250, 1) 0%, rgba(241, 111, 92, 0) 100%);
  --logo-color: rgba(250, 250, 250, 1);
  --header-color: rgba(0, 0, 0, 0.8);
}

.header .titles {
  position: fixed;
  width: 5.5em;
  left: 5em;
  background-color: red;
  /*     background-color: var(--header-color, rgba(0,0,0,0.8)); */
 ...