title: Elements appear smaller in mobile
body: <p>i'm having a headache with this problem and i don't know where it's coming from</p>
  
  <p>Basically i'm making this site, ok, everything is working fine until you try it on mobile, it's incredibly small. I've worked using the same methods in other site and this didn't hapenned at all, i didn't had to use meta or any media query, and it's still only a nav menu. So i'm using ul with class row and li with the col-sm-12 and col-md-4 so it works like desired.</p>
  
  <p>That's the pc view
  <a href="https://i.stack.imgur.com/GbmF6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GbmF6.png" alt="PC view"></a></p>
  
  <p>That's the mobile view</p>
  
  <p><a href="https://i.stack.imgur.com/7glYf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7glYf.png" alt="Mobile view"></a></p>
  
  <p>All the sizes are in rem and em. The itens are supposed to stack when mobile, and it did, but everything it's super small</p>
  
  <p>The demo:
  <a href="https://jsfiddle.net/nnhfqL2L/2/" rel="nofollow noreferrer">https://jsfiddle.net/nnhfqL2L/2/</a></p>
  
  <pre><code>body {
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #666;
  font-family: 'Roboto', Verdana, Tahoma, sans-serif;
  }
  
  /*Header*/
  /*Nav*/
  nav {
      border-bottom: 4px solid #888;
  }
  
  nav ul {
      margin: 0;
      padding: 0;
      border: 0;
      list-style-type: none;
      background-color: #fff;
      text-align: center;
          font-size: 1.5rem;
  }
  
      nav ul li {
          display: inline-block;
      }
  
          nav ul li a,a:hover {
              text-decoration: none;
              color: #000;
          }
  
              nav ul li section {
                  padding: 0.8em;
              }
  
              nav ul li .menuStrap {
                  background-color: #000;
                  height: 3px;
                  margin: 0 auto;
                  width: 0;
                  transition: width 0.2s;
                  transition-timing-function: ease-out;
              }
  
              nav ul li a:hover .menuStrap {
                  width: 100%;
              }
  
  
  &lt;header&gt;
      &lt;nav&gt;
          &lt;ul class="row"&gt;                
              &lt;li class="col-sm-12 col-md-3"&gt;
                  &lt;a href="#"&gt;                    
                      &lt;section&gt;Winpad ★&lt;/section&gt;
                      &lt;div class="menuStrap"&gt;&lt;/div&gt;                       
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="col-sm-12 col-md-3"&gt;
                  &lt;a href="#"&gt;
                      &lt;section&gt;Produtos&lt;/section&gt;
                      &lt;div class="menuStrap"&gt;&lt;/div&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="col-sm-12 col-md-3"&gt;
                  &lt;a href="#"&gt;
                      &lt;section&gt;Sobre&lt;/section&gt;
                      &lt;div class="menuStrap"&gt;&lt;/div&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="col-sm-12 col-md-3"&gt;
                  &lt;a href="#"&gt;
                      &lt;section&gt;Contato&lt;/section&gt;
                      &lt;div class="menuStrap"&gt;&lt;/div&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;       
      &lt;/nav&gt;
  
  &lt;/header&gt;
  </code></pre>