how to add space between multiple menus

Viewed 282

I am trying to give space between two menus

using margin left and margin right but it's not working.

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
<style>
  /*  .space{
       margin-left:5px;
    }*/
</style>

</head>
<body>
    <div class="navbar-fixed-top">
        <div class="col-md-12">
            <a link href="" style="font-size:20px;">ABCD Technology</a>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-8"></div>
                <div class="col-md-4 space">
                    <div style="margin-right:20px;"></div>
                    @Html.ActionLink("Home", "Index", "Home")
                    @Html.ActionLink("Services", "Index", "Home")
                    @Html.ActionLink("PortFolio", "Index", "Home")
                    @Html.ActionLink("About", "Index", "Home")
                    @Html.ActionLink("Hire Developer", "Index", "Home")
                </div>
            </div>
        </div>
    </div>

    @RenderBody()

    <div class="navbar-fixed-bottom" style="margin-left:45px;">
        <footer>
            <p>&copy; @DateTime.Now.Year - CopyRight@flt.com</p>
        </footer>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

site.css

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

image referance

Below given code is also not working:

<div style="margin-left:5px;"></div>

I am using external css class like

<style>
  /*  .space{
       margin-left:5px;
    }*/
</style>

but this also does not work.

see above image I am trying to add a space between two menus

is there any change in site.css class or I design a wrong menu?

2 Answers

Please replace the code.

<style>
  /*  .space{
       margin-left:5px;
    }*/
    
</style>

BY

<style>
.space a{ margin:0 7px; display: inline-block; }        
</style>

Try this:

<style>
  /*  .space a{
       margin: 5px;
    }*/
</style>

it will help to margin whole a tag

Related