In my .net core 2.0 Razor Pages application, I am facing an issue with rendering the site.css file as desired. My attempt to customize the _layout.cshtml file by modifying the navigation bar has not been successful. Upon running the project, the CSS styles do not apply properly; in fact, upon inspecting the page, it appears that the rendered CSS code is not even the one I edited.
The CSS code snippet I am using:
body {
padding: 0;
margin: 0;
border: 0;
}
.navigation {
background-color: blue;
color: white;
float: left;
width: 20vw;
height: 100vh;
}
/* Additional styling goes here */
The content of the _layout.cshtml file is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- Other meta tags -->
</head>
<body>
<nav class="nav flex-column navigation">
<ul class="nav flex-column">
<li><a asp-page="/Network/Index" class="navbar-brand">Adept</a></li>
<li><a asp-page="/Network/Index">Network</a></li>
<li><a asp-page="/Network/Index">Network</a></li>
</ul>
</nav>
<div class="container body-content">
@RenderBody()
</div>
<!-- Script and environment settings -->
@RenderSection("Scripts", required: false)
</body>
</html>
Upon running the solution, the displayed page does not reflect the intended CSS modifications. How can I resolve this issue?