Html 如何在CSS中调整边框大小？

我试图减小标题文本的边框大小，使其完全适合。我用的是

border:10px固体目前

以下是我所拥有的东西：

HTML:

如您所见，边框在整个屏幕上延伸，我想要的是缩小边框的宽度（而不是厚度），使其与文本完美匹配。
添加
显示：内联
到.banText

.banText {
    border: 10px solid;
    display: inline;
}

.banner {
    font-family: 'Slabo 27px', sans-serif;
    font-size: 50px;
    text-align: center;
    color: #f0f0f0;
    margin-top: 100px;
}

.banText {
    border: 10px solid;
    display: inline-block;
    margin: 0;
}

body {
    background: url("https://s3.amazonaws.com/f.cl.ly/items/3O2o342K3O1C1M2P461x/%201920x1080%20Wallpaper.png");
    background-size: 1920px 1080px;
    background-repeat: no-repeat;
}

.banText {
    border: 10px solid;
    display: inline;
}