Responsive webdesign

hello,
i actually need a help in making a website responsive (for carousel )

below is my code for positioning my arrows and dot stack in carousel but my page is overflowing please tell me how to get rid of overflowing the page when i use position absolute or translate(x, y)

.dot-stack {
	
	position: absolute;
	top: 93%;
	left: 50%;
    width: 100%;
	/*transform: translate(47%, -130%);*/
	margin: 0;
overflow: hidden;
}

.left-arrow, .right-arrow  {
	position: absolute;
	/*top: 60%;*/
	/*transform: translateY(-600%);*/
	cursor: pointer;
	color: #fff;
	font-size: 30px;
	overflow: hidden;

}

Thank You

Hi @arsheencoder78618888!

You might get more responses if you provide a link to the project.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Thank you next time I will make sure that I’ve added this backticks