Why does screen becomes horizontally scroll-able for smaller window size in this challenge?



The more the heart is rotated the more scroll-able it becomes.I can’t understand why.
I found this is not a problem in internet explorer 11 but in google chrome version 67

Do you mind post the code you are using?

To enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

<html>
<head>
<style>

.heart {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: pink;
  height: 50px;
  width: 50px;
  transform: rotate(-45deg);
}

.heart:after {
  background-color: pink;
  content: "";
  border-radius:50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 25px;
}

.heart:before {
  content: "";
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}

</style>
</head>
<body>
<div class = "heart"></div></body>
</html>