Bootstrap/CSS can't get this background image to be the full width of the screen.

I am googling this and copy pasting the css settings needed and it isn't doing a darn thing.

.darkness{
 
    background-image: url(./backgrounds/darkness.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;
}

html, body{
    min-height: 100%;
}

in the html:

<div class="darkness">
            <div class = "row" id="project">
                <h1 id="text5"></h1>
            </div>

            <div class = "row" id="project_list" id="project2">
                <p id="text6">
                </p>
            </div>

            <div class = "row" id = "links">
                <div class="col-md-6">
                    <p col-6><a href="">RESUME</a></p>
                </div>
                <div class="col-md-6">
                        <button type="button" class="btn btn-default btn-lg">
                                <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> 
                              </button>
                </div>
            </div>
        </div>

Half the width isn't the image. This is frustrating me a lot. Anyone have a hotfix? It would seem to me that the problem is that the .darkness div doesn't have the same width as the body. So how would I change that?

NVM: I GOT IT. Literally a minute after I posted here. I added this to the .darkness

position: absolute; left: 0; width: 100%;

because I conjectured correctly that the div doesn't have the same width as its parent.