When the screen size is 1365px and less I set `body {font-size: 85.333333331%;}` so that the header, main, footer elements have 16px font-size. When you open a browser's developer tools you see that the `header` and `div.container` nested inside the `header` really have 16px font-size ... so far so good. `h1#logo` nested inside the `div.container` has a `font-size: 0.48em` declaration. However, when I check the computed tab in google chrome I see that the actual font-size is 9px, but 16px \* 0.48 = 7.68px, so why am I getting a different value there? This error breaks my entire header which leads to the elements not being properly vertically aligned. Thanks for your help.

```css
/* general */
body {
 margin: 0;
 font: 100% "Open Sans", sans-serif;
 color: #7f7e7d;
}

header, main, footer {
 font-size: 1.171875em; /* 18.75px / 16px */ 
}

h1, h2, h3, h4, p, blockquote, figure, ol, ul {
    margin: 0;
    padding: 0;
}

main {
 display: block;
}

h2 {
 font-size: 3.3333333333em; /* 62.5px / 18.75px */
 font-weight: 400;
}

h3 {
 font-size: 1.5557333333em; /* 29.17px / 18.75px */
 margin: 1.1733333333em 0; /* 22px / 18.75px */
 font-weight: 400;
}

p {
 font-weight: 300;
}

a {
 color: inherit;
 text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
}

.container {
 max-width: 960px;
 margin: 0 auto;
}

.menu {
 list-style: none;
}

.menu > li {
 float: left;
}

.hide {
 display: none;
}

.cf:before, .cf:after {
 content: "";
 display: table;
}
.cf:after {
 clear: both;
}

/* header */
header {
 background: #000;
 color: #ccc;
 font-weight: 300;
}

header .container {
 position: relative; /* kvoli jazykovemu menu, ktore bude absolute */
 z-index: 1;
}

/* logo */
#logo {
 float: left;
 font-size: 0.48em; /* 9px / 18.75px */
 font-weight: inherit;
}

#logo a {
 display: block;
 text-transform: uppercase;
}

.logoPic {
 display: inline-block;
 text-indent: -9999px;
 background: url(../img/logo/logo.png) no-repeat left center;
 width: 148px; /* logo width */
 line-height: 7.6666666666666666666666666666667em; /* 69px / 9px */
 padding-right: 18px; /* priestor pre lomitko */
 position: relative;
}

.logoPic::after {
 content: "/";
 position: absolute;
 text-indent: 0;
 right: 3px;
 font-size: 40px; /* logo zostane stale rovnako velke, preto fixna velkost pre lomitko */
 color: #ffcc00;
}

/* navigation */
nav {
 float: right;
}

nav a {
 display: block;
}

#nav > li > a {
 line-height: 3.68em; /* 69px / 18.75px */
}

#nav > li {
 position: relative;
 margin-right: 1.2266666666666666666666666666667em; /* 23px / 18.75px */
}

#nav > li:last-child {
 margin-right: 0;
}

#nav > li:hover:not(.sub) > a {
 color: #bf9900;
}

#nav > li.sub:hover > a::before {
 content: "";
 position: absolute;
 width: 60%;
 margin-left: 20%;
 margin-right: 20%;
 height: 0.26666666666666666666666666666667em; /* 5px / 18.75px */
 background: #ffcc00;
}

#nav > li.sub:hover .submenu {
 visibility: visible;
}

/* navigation submenu */
.submenu {
 position: absolute;
 top: 3.7866666666666666666666666666667em; /* 71px / 18.75px */
 left: -1.0666666666666666666666666666667em; /* 20px / 18.75px */
 background: #000;
 list-style-type: none;
 visibility: hidden;
 transition: visibility .15s;
}

.submenu a {
 padding: 0.55626666666666666666666666666667em 0.67866666666666666666666666666667em; /* 10.43px / 18.75px | 12.725px / 18.75px */
}

.submenu li:hover {
 color: #bf9900;
}

/* languages */
#languages {
 position: absolute;
 right: -9.2266666667em; /* 173px / 18.75px */
}

#languages a {
 display: inline-block;
 line-height: 3.68em; /* 69px / 18.75px */
}

#languages li::after {
 content: "/";
 padding: 0 0.16em; /* 3px / 18.75px */
}

#languages li:last-child::after {
 content: "";
 padding-right: 0;
}

#languages li:hover a {
 color: #bf9900;
}

/* media queries */
@media (max-width: 1365px) {
 body {
  font-size: 85.333333331%;
 }
}
```

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
 <header>
  <div class="container cf">
   <h1 id="logo">
    <a href="#">
     <span class="logoPic">Marek Petrik</span>Professional Photographer
    </a>
   </h1>

   <nav>
    <ul id="nav" class="menu cf">
     <li><a href="#aboutMe">O mne</a></li>
     <li><a href="#">Služby</a></li>
     <li class="sub"><a href="#">Portfólio</a>
      <ul class="submenu ">
       <li><a href="#">Svadba</a></li>
       <li><a href="#">Modeling</a></li>
       <li><a href="#">Príležitostné</a></li>
       <li><a href="#">Architektúra</a></li>
       <li><a href="#">Príroda</a></li>
       <li><a href="#">Deti</a></li>
      </ul>
     </li>
     <li><a href="#">Referencie</a></li>
     <li><a href="#">Cenník</a></li>
     <li><a href="#">Kontakt</a></li>
    </ul>
   </nav>

   <ul id="languages" class="menu">
    <li><a href="#">SK</a></li>
    <li><a href="#">EN</a></li>
    <li><a href="#">DE</a></li>
   </ul>
  </div>
 </header>
</body>
</html>
```