定位精灵图片

Question

所以，我正在尝试为我的主页制作精灵图像，但我似乎无法正确定位。这是图像，因此您可以看到我希望它看起来像：

enter image description here

以下是我将其放在网页上的样子：

enter image description here

以下是代码：

#leagues {
  background: url('img/mainmenu.png') no-repeat 0 0;
  width: 600px;
  height: 200px;
}

#clubs {
  background: url('img/mainmenu.png') no-repeat -620px 0;
  width: 300px;
  height: 200px;
}

#nations {
  background: url('img/mainmenu.png') no-repeat 0 -220px;
  width: 500px;
  height: 200px;
}

#international-competitions {
  background: url('img/mainmenu.png') no-repeat -940px 0;
  width: 400px;
  height: 420px;
}

#domestic-competitions {
  background: url('img/mainmenu.png') no-repeat -520px -220px;
  width: 400px;
  height: 200px;
}

#national-teams-competitions {
  background: url('img/mainmenu.png') no-repeat 0 -440px;
  width: 660px;
  height: 200px;
}

#discontinued {
  background: url('img/mainmenu.png') no-repeat -680px -440px;
  width: 660px;
  height: 200px;
}