How to prevent outer <div> CSS from affecting inner <div> CSS
<p>I have set opacity on the outer wrapper to (0.5). However, this sets all the inner elements' opacity to (0.5) also. How can I make it so that the inner elements have an opacity of 1? Thanks!</p>

<pre><code>//..The HTML..//

&lt;div class="nav-wrapper"&gt;

    &lt;div class="circle1"&gt;&lt;/div&gt;
    &lt;div class="circle2"&gt;&lt;/div&gt;
    &lt;div class="circle3"&gt;&lt;/div&gt;
    &lt;div class="circle4"&gt;&lt;/div&gt;
    &lt;div class="circle5"&gt;&lt;/div&gt;

 &lt;/div&gt;

//..The CSS..//

.circle1 {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #BBBBBB;
}

.nav-wrapper {
    height: 100%;
    width: 100%;
    top: 0;
    opacity: 0.5;
    background: white;
}
</code></pre>