Adding extra resolution through @media screen breaks margin

Question

I use this in my CSS. Which works brilliantly.

@media screen and (max-width: 320px) {
  tw-story { font-size: 75%;
	width: 256px;
}
}

@media screen and (max-width: 360px) {
  tw-story { font-size: 76%;
	width: 288px;
}
}

@media screen and (max-width: 480px) {
  tw-story { font-size: 79%;
	width: 338px;
}
}

@media screen and (max-width: 568px) {
  tw-story { font-size: 81%;
	width: 345px;
}
}

@media screen and (max-width: 640px) {
  tw-story { font-size: 84%;
	width: 351px;
}
}

@media screen and (max-width: 720px) {
  tw-story { font-size: 86%;
	width: 356px;
}
}

@media screen and (max-width: 768px) {
	tw-story { font-size: 87%;
	width: 360px;
}
}

@media screen and (max-width: 800px) {
  tw-story { font-size: 88%;
	width: 375px;
}
}

@media screen and (max-width: 896px) {
		tw-story { font-size: 90%;
	width: 420px;
}
}

@media screen and (max-width: 900px) {
  tw-story { font-size: 90%;
	width: 422px;
}
}

@media screen and (max-width: 1024px) {
  tw-story { font-size: 93%%;
		width: 480px;
}
}

@media screen and (max-width: 1280px) {
  tw-passage { width: 600px;
	}
}

@media screen and (max-width: 1360px) {
  tw-story { font-size: 102%;
	width: 619px;
}
}

@media screen and (max-width: 1366px) {
  tw-story { font-size: 103.36%;
	width: 620px;
}
}

@media screen and (max-width: 1440px) {
  tw-story { font-size: 103%;
	width: 638px;
}
}

@media screen and (max-width: 1600px) {
  tw-story { font-size: 107%;
	width: 675px;
}
}

@media screen and (max-width: 1680px) {
  tw-story { font-size: 108%;
	width: 694px;
}
}

@media screen and (max-width: 1920px) {
  tw-story { font-size: 113%;
	width: 750px;
}
}

Now if I add the following, suddenly the left margin disappears when I play the story.

@media screen and (max-width: 2560px) {
  tw-story { font-size: 125%;
	width: 1200px;
}
}

How can I fix this?