Fix Menu on Left Side and Right Side Content Change on Menu Option Cli

I want Fix Menu on Left Side and Right Side Content Change on Menu Option Click in asp.net MVC

when I clicked on any menu option it displays content at the end of the page but I want content will be display on right side

here is my code

"en">
"utf-8" />
"viewport" content="width=device-width, initial-scale=1.0">
@ViewBag.Title - My Restaurant
"stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
"~/Content/Site-Master.css" rel="stylesheet" />
class="navbar navbar-inverse">
class="container-fluid">
class="navbar-header">
class="navbar-brand" href="#">WelCome Admin

class="collapse navbar-collapse" id="myNavbar">

class="nav navbar-nav navbar-right">

@Html.ActionLink("LogOut", "LogOut")

At first when you are using bootstrap Grid system then why are you using height and width explicitely

second why have you used RenderBody() within last div.

Note:- RenderBody() is what which renders all child pages, as you have kept it in bottom of page you are getting

pages in the bottom.

simply change your Layout as below , copy paste and RUN.

"en">
"utf-8" />
"viewport" content="width=device-width, initial-scale=1.0">
@ViewBag.Title - My Restaurant
"stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
"~/Content/Site-Master.css" rel="stylesheet" />
class="navbar navbar-inverse">
class="container-fluid">
class="navbar-header">
class="navbar-brand" href="#">WelCome Admin