**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