Can't figure out why my opacity overlay isn't showing 100%

Question

TL:DR Just look at the image attached (very bottom). :)

More details: Read it all, because I probably need more help than I realize. :)

I created this and everything is nice and simple the way I wanted (I'm a rookie, so I went for something simple) and I keep playing with it (making it worse probably) trying to get my layer background-color: rgba(28,31,29,0.7) to sit 100% over my background-image. What am I missing? I feel like it's a small fix.

If you have any other tips about unnecessary padding/margin, etc please let me know.

Thank you in advance!

[![* {
  padding: 0;
  margin: 0;
}

body {
  background-image: url(http://www.gecarchitecture.com/sites/default/files/WinsportGather2.jpg);
  background-repeat: no-repeat;
  background-size: cover;

}
.container {
  background-color: rgba(28,31,29,0.7);
  width: 100%;
  max-width: 650px;
  height: 100%;
  margin: auto;
}

.box {
  margin: 25px;
  padding: 20;
  border-radius: 10px;
  border: 3px solid #BC3E40;
}

header, section.who_we_are, section.book_us_today  {
  text-align: center;
}

h1 {
  color: #EDEBEA;
  padding: 15px 0;
  font-size: 3em;
  font-family: Arial, sans-serif;
}

p {
  color: #EDEBEA;
  line-height: 2;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, sans-serif;

}

.btn {
  background-color: #EDEBEA;
  padding: 10px;
  margin: 30px;
  max-width: 300px;
  color: black;
  text-decoration: none;
  border-radius: 9px;
  text-shadow: 1px 1px 6px #333333;
  box-shadow: 1px 1px 2px #333333;
  margin: auto;
}

.btn:hover {
  background-color: #BC3E40;
  color: #EDEBEA;
  text-decoration: none;
}

footer {
  font-size: 10px;
  text-align: center;
  margin-top: 30px;
    font-style: italic;
}][1]][1]

Answer 1

Generally it's desired to apply the darkening and gradient on the same element. This is true when you want the whole image to be darkened (as it seems you want). To do so, you just have to use a linear-gradient:

.container {
    background:
        /* Top color overlay, in this case darkening */
        linear-gradient(
          rgba(28, 31, 29, 0.7), 
          rgba(28, 31, 29, 0.7)
        ),
        /* The image you want to be beneath the color overlay */ 
        url(http://www.gecarchitecture.com/sites/default/files/WinsportGather2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

Demo

Answer 2

It is because you have a margin on the class box

.box {
    /* margin: 25px; */
    padding: 20;
    border-radius: 10px;
    border: 3px solid #BC3E40;
}

See jsfiddle - https://jsfiddle.net/ry4ummkp/1/

If you want space between the red outline and the container you can add padding to the container instead of a margin on the box. This may affect your layout.

.container {
    background-color: rgba(28, 31, 29, 0.7);
    width: 100%;
    max-width: 650px;
    height: 100%;
    margin: auto;
    padding: 25px;
}

See padding added to container class - https://jsfiddle.net/ry4ummkp/2/