How to avoid horizontal scroll on website

Question

I recently made a tribute page using html and CSS. The website looks fine on desktop but on mobile,a horizontal scroll bar appears and make the website look left aligned.I think its because the images exceed the parent container but I am unable to fix it.

Github pages: https://rahulviveknair.github.io/Coldplay-Tribute-Page/

Code hosted on github: https://github.com/RahulVivekNair/Coldplay-Tribute-Page

The code used to adjust image but does not seem to be working

#image {
  max-width: 100%;
  display: block;
  height: auto;
  margin: 0 auto;
}

Answer 1

I would suggest you to do the following:

1. remove margin and padding from the body, and set its width to 100%, in order not to rely on the default width applied by the browser:

body{padding:0; margin:0; width:100%;}

2. set a max-width if the disks cover:

#image-grid img {max-width: 100%;}

3. change the font-size of the title with media query:

@media screen and (max-width: 600px) {
    h1 { font-size: 30px; }
}