Make a small rounded container in _layout.cshtml page-CodePudding

I have the following code on my _Layout.cshtml page:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"] - FeeCalc</title>
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
        <link rel="stylesheet" href="~/FeeCalc.styles.css" asp-append-version="true" />
    </head>
    <body style="background-color:cadetblue">
        <header>
            <nav  style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:100%; ">
                <div >
                    <span  style="display:flex;">
                        <a href="https://www.google.com/">
                            <img src="~/Img/Infoorange.png" alt="ACR" width="80" height="80"  runat="server" />
            
                        </a>
                        <span style="font-size:25px;color:white;"><span style="color:#e9c46a">SpringField</span><br />company Name</span>
    
                    </span>
          
                </div>
            </nav>
        </header>
        <div >
        <div >
            <main role="main" >
                @RenderBody()
            </main>
        </div>
        </div>

This page looks like this:

I want to put a container in center of white color just like this:

so that I can put HTML control inside the white space. In order to achieve this. I tried to write the following code:

<div style="margin-top: 70px;position:relative;top:50px">
        <div  style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%;"    >
  <main role="main" >
            @RenderBody()
        </main>
    </div>
    </div>

nothing seems to appear on the page. the page looks the same with no color on the container. How can I make a white color center container on this blue color page.

Any help will be greatly appreciated.

CodePudding user response：

I checked your code, and it seems your container-bg class with the white colored background under navbar-brand class. Add margin-top: 100px; to container-bg class.

 <div >
  <div style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%; margin-top: 100px; height: 90px;" >
    <main role="main" >@RenderBody()</main>
  </div>
</div>