Text in info box not on same line

Question

I am trying to display the text in the info box on the same line but for some reason each word is on a new line. So that it displays as 'Problems Encountered' one line. I have tried text-align: left.

Here is the view code:

    <div class="panel-body">
        <a href="~/Employee/Index">
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                <div class="info-box blue-bg">
                    <i class="fa fa-user"></i>
                    <div class="count" style="font-size:50px">@Html.Raw(rows)</div>
                    <div class="title" style="font-size:large;">Available Drivers</div>

                </div>

                <!--/.info-box-->
            </div>
        </a>
        <!--/.col-->
        <a href="~/Vehicle/Index">
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                <div class="info-box brown-bg">
                    <i class="fa fa-truck"></i>
                    <div class="count" style="font-size:50px">@Html.Raw(rows1)</div>
                    <div class="title" style="font-size:large">Available Vehicles</div>
                </div><!--/.info-box-->
            </div><!--/.col-->
        </a>
        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
            <div class="info-box red-bg">
                <i class="fa fa-exclamation-triangle"></i>
                <div class="count" style="font-size:50px">@Html.Raw(rows4)</div>
                <div class="title" style="font-size:large;">Problems Encountered</div>

            </div><!--/.info-box-->
        </div><!--/.col-->

        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
            <div class="info-box green-bg">
                <i class="fa fa-check"></i>
                <div class="count" style="font-size:45px">@Html.Raw(rows3)/@Html.Raw(rows2) </div>
                <div class="title" style="font-size:large">Completed Deliveries</div>
            </div><!--/.info-box-->
        </div><!--/.col-->


    </div>
</section>