如何正确调整div的大小

Question

在这个jsfiddle（https://jsfiddle.net/centem/L1r5pskb/6/）中我试图增加每个方块的宽度，这样我就可以将主机名放在盒子里面（2个主机名）但是如果我试着增加方块的宽度（在“.col-md-4 .row div”类不再以附图所示的格式显示。这样做的正确方法是什么，以便文本适合广场？谢谢。

/ *正方形的css * /

.col-md-4 .row div {
    display: inline-block;
    margin: 10px;
    background-color: black;
    color: white;
    /*padding: 5px;*/
    width: 60px;
    height: 60px;
    line-height: 60px;
    /*word-wrap: break-word;*/
    text-align: center;
}