Responsive Notifications Page using jQuery and JavaScript for notis

Hello!

I hope you enjoy the website I made; some questions I still have:

1. When I was putting the red dots for the unmarked notifications, I created a nested span element and turned the opacity on and off. In doing so, I had a hard time lining the span element up with the text and ended up not doing so because I think the design I have now looks better; however, I would still like to know how to line up my dot with the text. Can anyone help me with this?
2. I tried commenting my code very well and using proper semantics for my HTML; did I use sufficient semantics and comments in my code?
3. My responsive design works well up until about 900px, but then the widths of my banners exceed the width of the body. Does anyone have advice for how to get around this issue?

If you can help with any of these questions, that would be wonderful! If not, thank you for stopping by!