[Solved] Kendo Tabstrip Lining Tabs Vertically instead of Horizontally

[Charlston]

I have an issue with the Kendo TabStrip I constructed: the tabs are overlapping instead of sitting next to each other. I have tried using HtmlAttribute class on each table item itself. I am still unable to get them to be side by side. (See Code with css script. )

Does anyone have a possible solution?

 

 

<div>
    @(
                Html.Kendo().TabStrip()
                .Name("tabstrip")
                .TabPosition(TabStripTabPosition.Top)
                .Scrollable(false)
                .Animation(animation =>
                animation.Open(effect =>
                effect.Fade(FadeDirection.In)))
                .Items(tabstrip =>
                {
                        tabstrip.Add().Text("Pilot Profile").Selected(true).Encoded(false)
                        .Content(
                            @<text>@await Html.PartialAsync("_pilotProfile", Model)</text>
                        );
                         tabstrip.Add().Text("History").Encoded(false)
                        .Content(
                            @<text>@await Html.PartialAsync("_pilotHistory", Model)</text>
                        );
                        if (!string.IsNullOrEmpty(Model.ContactList?.CallScriptText))
                        {
                        tabstrip.Add().Text("Call Script").Encoded(false)
                                .Content(
                            @<text>@await Html.PartialAsync("_callScript", Model)</text>);
                        }
                        if (Model.ContactList != null)
                        {
                            tabstrip.Add().Text("Assessment").Encoded(false)
                                .LoadContentFrom("Assessment", "Pilots", new { PilotId = Model.PilotId, Campaign = Model.ContactList.ContactListId });
                        }
                        else
                        {

                            tabstrip.Add().Text("Assessment").Encoded(false)
                                .LoadContentFrom("Assessment", "Pilots", new { PilotId = Model.PilotId });
                        }

                  

                })
        )
</div>

<style scoped>
    @@media only screen and (max-width: 991px) {
        #tilelayout {
            grid-template-columns: repeat(1, minmax(0px, 100%)) !important;
            grid-auto-rows: minmax(0px, auto) !important;
        }

        .k-tilelayout .k-card {
            box-shadow: none;
            border-width: 1px;
            height: auto;
        }


        .k-tilelayout-item[data-index="2"] {
            display: none;
        }
    }

    .pilot {
        margin: 0 auto 30px;
        text-align: center;
    }

    #tabstrip h2 {
        font-weight: lighter;
        font-size: 5em;
        line-height: 1;
      
        margin: 0;
    }

        #tabstrip h2 span {
            background: none;
            padding-left: 5px;
            font-size: .3em;
            vertical-align: top;
        }

    #tabstrip p {
        margin: 0;
        padding: 8px;
    }

    #tabstrip .k-tabstrip-items .k-item {
        display: inline-block;
    }

    #tabstrip .k-tabstrip-items {
        display: block;
    }

    .k-tabstrip-items .k-item {
        display: inline-block;
    }
</style>