Whenever you paint content outside the viewport, the browser will allow the user to scroll to it, on both directions.
By setting .blob's width to 150% on screens below 600px and to 290% on screens below 450px, you are rendering content outside the current viewport width, thus creating a horizontal scrollbar.
Since the content painted outside the viewport on the horizontal axis is irrelevant (you're only interested in the part of the enlarged element rendered inside the viewport), you probably want to disable horizontal scrolling on the body element:
body {
overflow-x: hidden;
}
See it here.
Side note: another way to enlarge .blob would have been to transform it, instead of setting its width and height:
@media (max-width: 600px) {
.blob {
transform: scale(1.5);
}
}
@media (max-width: 450px) {
.blob {
transform: scale(2.9);
}
}
I'm not just mentioning it, I'm recommending it. Using transform vs sizing or positioning has the big advantage of only happening in the compositor layer, without any effect on the layout and paint layers, which brings a big performance increase, especially when dealing with animations. This is well documented all over the web and I tried my best at explaining the mechanics here.
