Using foreach statement possibly messing with my CSS

Question

I've now spent a couple hours trying to figure out something that should take 5 seconds to do. Using MVC's razor engine I call a foreach statement to loop through and load my html content in my view(cshtml). I need my content to only be viewed moving horizontally with horizontal scrollbar instead of default vertical load with scroll bar. I have tried literally everything and I've come to find that when I try making simple html code under a foreach statement my css to make the content doesn't work, other wise it will work fine. Any ideas on why this could be and what can be done to fix this bug.

What this code is currently doing is it will take the two div's in the foreach statement and will put all one line, but foreach item in the collection(each div) it will skip a line. Not sure why.

<div class="container-scroll">


    @foreach (var item in Model)
    {
        <div style="display:inline-block !important;">dddddkklas;dlkfjlksjdlfklskdjflksjdlkflskdjflksjdfsdfsdfsdfsdfsdfs555555555555555555</div>
        <div style="display:inline-block !important;">lkjslkdj5555555555555444444444444444</div>
    }
</div>

.container-scroll {
    width: auto;
    min-width: 0px; 
    overflow-x: scroll; 
    position: relative;
    min-height: 100%;
 }

Answer 1

Try adding white-space: nowrap; to your .container-scroll class.