Quick help (you have < 2min): Just look at the image attached (very bottom). :)

Big help (you have more than a few minutes): 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.

Also if you are going to help (most of you are rock stars) feel free to tell me if I have any unnecessary padding/margin, etc since that does seem to be an area us rookies make tons of errors in from what I can tell. Also I accept any and all addition feedback.

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]

[![screen shot of the offending error][1]][1] [1]: https://i.sstatic.net/s5Sz4.png

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]

[![screen shot of the offending error][1]][1] [1]: https://i.sstatic.net/s5Sz4.png