Can't override bootstrap style with my own stylesheet
<p><strong>ASP MVC RAZOR</strong></p>

<p>I try to override the bootstrap default style. I declared my stylesheet as below:</p>

<pre><code> /*bootstrap and default style*/
 @Styles.Render("~/Content/css");
 /*My CSS*/
&lt;link href="@Url.Content("~/css/main.css")" rel="stylesheet" type="text/css" /&gt; 
        @RenderSection("Styles", required: false)
</code></pre>

<p>In the bundleconfig:(only the default styles)</p>

<pre><code>       bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css" ));
</code></pre>

<p>But as you can see below my style is overriden by bootstrap .</p>

<p><a href="https://i.stack.imgur.com/gNoS7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gNoS7.png" alt="Inspector"></a></p>

<p>I thought it has something to do with the order of the style in the head tag. But mine comes after bootstrap so it should work...</p>

<p>I copy the full layout page so you can check what's going on.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;@ViewBag.Title&lt;/title&gt;
    &lt;link href="@Url.Content("https://fonts.googleapis.com/css?family=Roboto")" rel="stylesheet" type="text/css" /&gt;
    &lt;link href="@Url.Content("https://fonts.googleapis.com/css?family=Tangerine")" rel="stylesheet" type="text/css" /&gt;
    @Styles.Render("~/Content/css");
    &lt;link href="@Url.Content("~/css/main.css")" rel="stylesheet" type="text/css" /&gt;
    @RenderSection("Styles", required: false)



&lt;/head&gt;
&lt;body&gt;

    &lt;div class="cachetop col-lg-12 navbar-fixed-top"&gt;&lt;/div&gt;
    &lt;div class=" topmenubar navbar navbar-default navbar-fixed-top "&gt;
        &lt;div class="container"&gt;
            &lt;div class="navbar-header"&gt;
                &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                    &lt;span class="icon-bar"&gt;&lt;/span&gt;
                    &lt;span class="icon-bar"&gt;&lt;/span&gt;
                    &lt;span class="icon-bar"&gt;&lt;/span&gt;
                    &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;/button&gt;

                &lt;a class="navbar-left " href="@Url.Action("Accueil","Home")"&gt;
                    &lt;img src="@Url.Content("../img/minilogo.png")" /&gt;
                &lt;/a&gt;

            &lt;/div&gt;
            &lt;div class=" navbar-collapse collapse"&gt;
                &lt;ul class="menuitembar nav navbar-nav"&gt;
                    &lt;li class="menuitem nav-item active"&gt;@Html.ActionLink("Notre carte", "pizzas", "Carte", null, new { @class = "nav-link" })&lt;/li&gt;
                    &lt;li class="menuitem nav-item"&gt;@Html.ActionLink("Nous trouver", "Localisation", "Home", null, new { @class = "nav-link" })&lt;/li&gt;
                    &lt;li class="menuitem nav-item"&gt;@Html.ActionLink("Un peu d'histoire", "Histoire", "Home", null, new { @class = "nav-link" })&lt;/li&gt;
                    &lt;li class="menuitem nav-item"&gt;@Html.ActionLink("Travailler chez Michel", "Workwith", "Home", null, new { @class = "nav-link" })&lt;/li&gt;

                &lt;/ul&gt;

            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container body-content"&gt;
        @RenderBody()
        &lt;hr /&gt;
        &lt;footer&gt;
            &lt;div class="text-center"&gt;
                &lt;p&gt;

                &lt;/p&gt;
            &lt;/div&gt;
        &lt;/footer&gt;

    &lt;/div&gt;


    @Scripts.Render("~/bundles/jquery")
    @RenderSection("Javascript", required: false)
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/modernizr")

&lt;/body&gt;
&lt;/html&gt;
</code></pre>