I'm trying to have a navbar and a body with the same color, using RGBA. Unfortunately, when I use the exact same color on the nav and the body, using css variables to make sure it's right, I get a different result in the two elementss.

Minimal example down below. I'd like the background to foo to be the same as the background to bar, and don't understand why it isn't.

There's additional additional complexity that makes it suboptimal for me to take the obvious solution, namely to let the nav element just inherit from the body. See below the snippet for explanation.

```css
:root {
    --main-bg-color: rgba(172, 196, 165, 0.75);
}

body {
    color: #333;
    background-color: var(--main-bg-color);
}

.navbar-default {
    background-color: var(--main-bg-color);
    border: none;
}
```

```html
<html>
    <body>
        <nav class="navbar-default">foo</nav>
        bar
    </body>
</html>
```

Additional relevant information: I'm overriding some Bootstrap classes with the nav, and I would prefer not to just build and host my own local version of bootstrap to get this right. The upshot is that I can't just drop the background-color on the nav and let it inherit from the body. If I drop my own css it gets the color from miserable bootstrap defaults and ends up white. I guess I can go and get a local bootstrap if I have to, but there must be a better way.