CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mvc Learner
Mvc Learner

Reputation: 229

Extra White space to the right of container class

M trying to build a website in Mvc Asp.net Visual Studio. I tried everything, margin:0; padding:0 etc, but my container class is not getting extended to the full width of the page. There is some white space to its right. I included my own stylesheet 'style.css' - bundling it after the default bootstrap.css file in the bundleconfig. Ive used the reset.css file too. I dont have much idea about bootstrap responsive feature - @media, so i dont know if any of those in bootstrap.css is causing the problem. Here's my code: _Layout.cshtml

<body>

    <div class="header">
        <div class="container">

            <div class="row">
                <div class="col-md-2">
                    <img class="logo" src="~/Content/Images/logo.png" />
                </div>
                <div class="col-md-10">
                    <h1><span>Kerala</span>-The Experience of a lifetime</h1>
                </div>
            </div>

            <div class="menu">
                <ul class="nav">
                    <li class="active" role="presentation"><a href="#">Home</a></li>
                    <li role="presentation"><a href="#">Travel Information</a></li>
                    <li role="presentation"><a href="#">Seasons</a></li>
                </ul>
            </div>

        </div>
    </div>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

index.cshtml

@{
    ViewBag.Title = "Home Page";
}

<div class="main">
    <div class="container">

    </div>
</div>

style.css

html,body {
    margin:0;
    padding:0;
}

.header{
    background-color:#1dbbd3;
    width:100%;

    margin:0;
    padding:0;
}
.container{
    width:100%;
    margin:0;
    padding:0;
    border:1px solid black;
}
.header h1{
    font-size:24px;
    font-style:oblique;
    margin-top:0;
    padding-top:0;
}
.header h1 span{
    font-size:64px;
}
.header .row img{
    height:80px;
    width:100px;
    margin:0;
    padding:0;
}
.header .row .col-md-10{
    color:#1BDA1B;
    text-align:center;
    text-shadow: 4px 4px 4px #aaa;
    /*border:1px solid blue;*/
    margin-left:0;
    padding-bottom:0;
}
.header .menu ul{
    list-style-type:none;
    display:inline-block;
}
.header .menu ul li{
    display:inline-block;
    color:#0d4869;
    margin-right:20px;
}
.header .menu ul li.active{
    background-color:#1BDA1B;
    color:#0d4869;

}
.header .menu li a:hover{
    background-color:#1BDA1B;
}

/**********************Main**********************/
.main{
    background: url(/Content/Images/places8-bekalfort.jpg) no-repeat center center; 
    background-size: cover;
    margin:0;
    padding:0;
    width:100%;
    height:500px;

}

This is the page on the browser: enter image description here

The black line on the screen is the border of the container and it clearly has a margin on its right. Please help resolve this issue. Ive been stuck for so long.

Upvotes: 0

Views: 1754

Answers (1)

Obiwan
Obiwan

Reputation: 1

From what I can see the row is fine for what you are trying to achieve. Just remove any custom styling where you have tried to overwrite the bootstrap CSS and then take out the div class="container". The default Bootstrap container restricts your content to 1200px (with padding, 15px with side). It seems to me that you are actually hindering yourself with your custom CSS, when really the div class="container" is most likely your problem.

For full width rather just use div class="row".

Hope this helps.

Upvotes: 0

Related Questions