# \`setInteractive\` function is misaligned, when css padding is set
**URL:** https://phaser.discourse.group/t/setinteractive-function-is-misaligned-when-css-padding-is-set/14446
**Category:** Phaser 3
**Created:** [June 16, 2024, 8:05pm UTC](https://phaser.discourse.group/t/setinteractive-function-is-misaligned-when-css-padding-is-set/14446 "2024-06-16T20:05:24Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@akumagamo](https://phaser.discourse.group/u/akumagamo)
#### Post date: [June 16, 2024, 8:05pm UTC](https://phaser.discourse.group/t/setinteractive-function-is-misaligned-when-css-padding-is-set/14446/1 "2024-06-16T20:05:24Z")
I noticed that the **hitbox** on some buttons where misaligned, and after some testing, I found out it had to do with setting css padding. _([Here a demo](https://codepen.io/akumagamo/pen/JjqMLNd), showcasing the error)_. The Hitbox should be only on the red square, but the hitbox is more or less inside of the yellow square. Is this really an error, or did I do something wrong?
How could I prevent this?
I couldn’t find nothing in the github issues.
_(Phaser Version 3.81)_
---
### Author:  [@samme](https://phaser.discourse.group/u/samme)
#### Post date: [June 17, 2024, 12:41am UTC](https://phaser.discourse.group/t/setinteractive-function-is-misaligned-when-css-padding-is-set/14446/2 "2024-06-17T00:41:01Z")
You mustn’t pad the game canvas, only the parent.
See **Parent and Display canvas containment guidelines** in [Phaser.Scale.ScaleManager](https://newdocs.phaser.io/docs/3.80.0/Phaser.Scale.ScaleManager).
---
### Author:  [@akumagamo](https://phaser.discourse.group/u/akumagamo)
#### Post date: [June 17, 2024, 4:56am UTC](https://phaser.discourse.group/t/setinteractive-function-is-misaligned-when-css-padding-is-set/14446/3 "2024-06-17T04:56:45Z")
Thank you, I didn’t have this on the radar. Makes of course sense, thanks for your fast response. 👍