title: Nav in a background color
body: <p>I have a problem regarding my navigation bar. My navigation bar is not in my block‘s background color. I can try <code>position:absolute</code> but it's not recommended.</p>
  
  <pre><code>.transparent{
    width: 100%;
    height: 100px;
    margin-top: 10px;
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    opacity: 1;
  }
  </code></pre>
  
  <p>I am stuck. Can anyone help or have an idea why the code doesn’t work? Please help. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
  @import url('https://fonts.googleapis.com/css?family=Questrial');
  
  body{
    padding: 0px;
    margin: 0px;
  }
  
  header{
    width: 100%;
    height: 38px;
  }
  
  .subtitles{
    font-size: 13px;
    font-family: 'Roboto Slab', serif;
    padding-top: 8px;
    padding-left: 80px;
    padding-right: 80px;
    text-transform: uppercase;
    text-align:right;
  }
  
  .subtitle-left{
    display: inline-block;
    padding-left: 18px;
    float: left;
  }
  
  .subtitle-right{
    display: inline-block;
    padding-left: 18px;
  }
  
  .far{
    color: #C22312;
    font-size: 16px;
  }
  
  
  .transparent{
    width: 100%;
    height: 100px;
    margin-top: 10px;
    background-color: rgba(0,0,0,0.5);
    opacity: 1;
  }
  
  .mylogo{
    padding-top: 22px;
    padding-left: 80px;
    padding-bottom: 16px;
    position: absolute;
  }
  
  nav{
    padding-top: 10px;
    padding-right: 120px;
    width: auto;
  }
  nav ul{
    width: auto;
    padding: 0px;
    margin: 0px;
    list-style: none;
    float: right;
  }
  nav ul li{
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 13.333px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
  }
  nav ul li a{
    padding: 10px 14px 10px 14px;
    text-decoration: none;
    color: #f2f2f2;
    text-align: center;
  }
  nav ul li a:hover{
    background-color: white;
    color: black;
  }
  
  .active{
    background-color: #C52E1E;
    color: #f2f2f2;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;header&gt;
  &lt;div class="subtitles"&gt;
    &lt;div class="subtitle-left"&gt;&lt;i class="far fa-calendar"&gt;&lt;/i&gt; 137 Running Days &lt;/div&gt;
    &lt;div class="subtitle-left"&gt;&lt;i class="far fa-envelope"&gt;&lt;/i&gt; Admin@superbtc.biz &lt;/div&gt;
    &lt;div class="subtitle-right"&gt;&lt;i class="fas fa-caret-right"&gt;&lt;/i&gt; Deposit &lt;/div&gt;
    &lt;div class="subtitle-right"&gt;&lt;i class="fas fa-caret-right"&gt;&lt;/i&gt; Paidout &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="transparent"&gt;
  &lt;img class="mylogo" src="https://i.ibb.co/kMZjHWx/logo.png" &gt;
  &lt;/div&gt;
  &lt;nav&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a class="active"&gt;&lt;href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;About us&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Investement plan&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Faqs&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Rules&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
    &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>