[SOLVED] Why do changes applied to bootstrap.css not work when published but do work on localhost?

I'm building an asp.net website (webforms) in Visual Studio 2017 version 15.2 (26430.16) and Microsoft .NET Framework version 4.7.03056. (targetFramework .NET = 4.5.2).

Upon creation of the solution a bootstrap.css file is created, together with the Site.master and so on.

When I edit the bootstrap.css file I can see changes happening when viewing the website on localhost. But after publishing to my host, it doesn't seem to have applied those changes to the live website.

Part of my 'Site.master' page:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <title>CompanyX | <%: Page.Title %></title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="keywords" content="CompanyX, ..." class="next-head" />
    <meta name="author" content="CompanyX" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta property="og:title" content="CompanyX" />
    <meta property="og:description" content="..." />

    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>

    <webopt:bundlereference runat="server" path="~/Content/css" />

    <asp:ContentPlaceHolder ID="Stylesheets" runat="server">
        <link rel="stylesheet" href="/Content/Site.css" type="text/css" runat = "server" />
    </asp:ContentPlaceHolder>
</head>

<body>
    <form runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>

        <div class="navbar navbar-inverse navbar-fixed-top">
            <%-- navbar css styling is done in the 'bootstrap.css' file --%>
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" runat="server" href="~/">
                        <asp:Image ID="logo" runat="server" ImageUrl="~/images/logo.png" AlternateText="logo" style="width:15%; height:auto;"></asp:Image>
                        <span>CompanyX</span>
                    </a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a runat="server" href="~/About">About</a></li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" runat="server" href="#">Products<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a runat="server" href="~/Product-1">Product-1</a></li>
                                <li><a runat="server" href="~/Product-2">Product-2</a></li>
                            </ul>
                        </li>
                        <li><a runat="server" href="~/Photos">Photos</a></li>
                        <li><a runat="server" href="~/Contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="container body-content">
            ...
        </div>

    </form>
</body>

A change I applied in the 'bootstrap.css' file:

.navbar-nav > li > a {
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
    font-size: medium;
}

I added a margin-top: 10px; here, so my items from the navbar-collapse collapse are horizontally aligned with the logo and text from navbar-brand.

I'd expect this to work for both, localhost and published website.

I also tried adding the below code to asp:ContentPlaceHolder ID="Stylesheets" as an extra reference to the bootstrap.css file, but no luck there either.

<link rel="stylesheet" runat="server" href="/Content/bootstrap.css" type="text/css" />

Your input is much appreciated.

Below you can see the result visualized:

Update:

Actually it looks like something strange is going on, when viewing the page source code.

My code to render CSS on my Site.master:

On localhost, the source code looks like this:

On published website, the source code looks like this:

And I just realized I don't need the ContentPlaceHolder ID="Stylesheets". I've now removed it from my code, but the problem remains.

Any thoughts on why this is different?