javascript - How to make a div fit the whole width?

Question

I want to make the div with class ".shadow" fit the whole width. But I am unable to figure it out. The code I am using is given bellow.

.main .container{
    margin: auto;
    display: table;
}

.main .main-inner{
    display: table-cell;
    vertical-align: middle;
    height: 100vh;
    text-align: center;
}

.shadow{
    background-color: rgba(0, 255, 0, 0.25);
}

<section class="main">
     <div class="container">
        <div class="main-inner">
            <div class="shadow">
                <img src="images/broadhurst.gif" alt="" class="logo-img">
                <ul>
                    <li><a href="glenn-broadhurst.html">Glenn Broadhurst</a></li>//
                    <li><a href="#">Demand Calculator</a></li>//
                    <li><a href="clock.html">The Clock</a></li>
                </ul>
            </div>
        </div>
     </div>
    </section> 

Answer 1

By the whole width, you mean the whole page? if that's what you want then

.shadow{background-color: rgba(0, 255, 0, 0.25); width:100%;position:absolute}

is what you're looking for Edit: Oh, and don't forget to add width:100% to the other elements too