Javascript Pixi.js应用程序不会完全填满屏幕

我正在使用pixi.js开发一个游戏，但无法让应用程序填满整个屏幕。我在代码中看到并添加了resize方法，但是当调用它时，它会在应用程序周围留下一个5到10像素的小边框。我还尝试过使用position:absolute，它会删除底部和右侧的边框，但不会删除顶部和左侧的边框。我无法让它调整到左上角的屏幕为我的生活。我的代码如下：

我希望我插入的是正确的，但正如您所看到的，在键入名称并按下play后，它不会填充整个屏幕，并在顶部和左侧留下该间隙。如果你能帮忙，请告诉我-谢谢

//实例变量
var博弈；
//输入变量
var鼠标={}；
var-keyUp=false；
var-keyDown=false；
var keyLeft=false；
var-keyRight=false；
//加载页面时添加按钮侦听器和键输入
window.onload=函数（）{
id（“播放btn”）。添加EventListener（“单击”，播放）；
设置输入（）；
}
//验证名称和开始是否正确
函数播放（）{
让name=id（“名称输入”）。值；
如果（名称==“输入名称”| |名称===”）{
错误（“请输入名称”）；
}else if（name.length<3）{
错误（“名称必须至少包含3个字符”）；
}否则如果（name.length>20）{
错误（“名称必须少于21个字符。”）；
}否则{
StartName（姓名）；
}
}
//隐藏菜单div、显示游戏div和创建游戏对象
函数startGame（名称）{
隐藏（id（“菜单分区”）；
currentGame=新游戏（名称）；
id（“游戏分区”）.appendChild（currentGame.app.view）；
调整大小（currentGame.app）；
addEventListener（“调整大小”，函数（）{
调整大小（currentGame.app）；
});
表演（游戏组）；
}
函数游戏（）{
this.app=新的PIXI.Application({
自动调整大小：正确，
分辨率：devicePixelRatio，
背景颜色：0x000000
});
}
功能调整（应用程序）{
app.renderer.resize（window.innerWidth+30，window.innerHeight+30）；
}
函数隐藏（元素）{
元素.classList.add（“隐藏”）；
for（设i=0；i

正文{
背景色：暗绿色；
溢出：隐藏；
}
#菜单分区{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
}
#菜单标题{
文本对齐：居中；
边缘底部：200px；
}
#菜单中间{
显示器：flex；
弯曲方向：立柱；
对正内容：空间均匀；
宽度：30%；
身高：30%；
}
#播放btn{
字号：35pt；
边缘顶部：50px；
边缘底部：20px；
}
#名称输入{
字号：35pt；
}
#错误文本{
颜色：红色；
字号：20pt；
}
#游戏部{
边框：1px纯红；
保证金：0；
填充：0；
溢出：隐藏；
位置：绝对位置；
光标：无；
}
帆布{
显示：块；
}
.隐藏{
显示：无；
}

标题
玩

请尝试使用本评论中建议的css:-以及下面的答案。这修复了左侧的间隙，现在只是顶部。。。现在我知道还有什么需要研究了，谢谢！请尝试使用css，正如在这篇评论中所建议的：-以及下面的答案。这修复了左侧的空白，现在只是顶部。。。现在我知道还有什么需要研究了，谢谢！