Inline-block doesn't seem to work

Question

I'm trying to display a simple block layout on my page. Just a couple of boxes, nothing fancy. This is my code:

@section Content{

@model IEnumerable<webapp_stufv.Models.Article>

<h2>@ViewBag.Title</h2>

    @foreach ( var item in Model ) {
        <div class="floating-box">
            <h4>
                @Html.DisplayFor( modelItem => item.Title )
            </h4>
            <p>
                @Html.ActionLink( @item.Content.Substring ( 0, 100 ), "Details", "News", new { id = item.Id }, null )
            </p>
        </div>
    }
}

And this is my css:

.floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;  
}

I really have no idea what's the problem. I'll add a screenshot of the result.

I've never used an inline-block layout before, so maybe it's something simple. This code is from W3C, straight up copy paste, so it should work right?

EDIT: This is what it should look like: https://jsfiddle.net/fha4oftm/ EDIT_2: I've noticed upon inspecting my page in the browser, floating-box does not exist in my .css file. This is strange since it DOES exist in the css file in my project.

Answer 1

Try adding the following to the top of your view...

        <link rel="stylesheet" href="~/path/yourcssfile.css" />