CSS structure changes in html & aspx page

Question

My website shows different output in .aspx page while using same structure & CSS in html page it shows correct output but in apsx page css gets collapse. I check both code twice & it is same but output gets different.

HTML Page Output

ASPX page output

HTML Code

<!--bg-img-container-starts--><div class="bg-img-container">
        <!--bg-img-starts--><div class="bg-img">
            <!--header-starts--><div class="header">
                <!--logo-starts--><div class="logo">
                    <h2><a title="Quista" href="#">Quista</a></h2>
                </div><!--logo-ends-->

                <!--menus-starts--><div class="menus">
                    <ul class="nav">
                    <li><a href="#">Home</a> <div class="pipe"></div></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Track Orders</a></li>
                    <li><a href="#">About Quista</a></li>
                    <li class="call"><a href="#">Call Us :- +91 1234 1245</a></li>
                    </ul>
                </div><!--menus-ends-->
            </div><!--header-ends-->
        </div><!--bg-img-ends-->

CSS

html, body{
    margin:0;
    padding:0;
    width:100%;
    height:100%
}

.clear{clear:both}

body{
    font-family:'Quicksand', sans-serif;
}

.bg-img-container{
    width:100%;
    position:relative;
    height:100%
}

.bg-img{
    width:100%;
    max-height:768px;
    height:100%;
    background:url(../Images/0000.jpg) no-repeat;
    background-size:cover;
}

.header{
    width:100%;
    max-width:1200px;
    position:relative;
    margin:0 auto;
    padding:15px 0 0 0
}

.logo{
    width:20%;
    display:inline-block;
}

.logo h2{
    font-family:'MyriadPro-BoldCondIt';
    font-size:4em;
    padding:0;
    margin:0;
    letter-spacing: 5px
}

.logo a{
    color:#fff;
    text-decoration:none
}

.menus{
    width:79%;
    display:inline-block;
}

.nav{
    marging:0;
    padding:0
}

.nav li{
    display:inline-block;
    list-style:none:none;
}

.nav li a {
    padding:15px 25px 15px 25px;
    color:#fff;
    text-decoration:none;
    display:block
}

.nav li a:hover{
    border-bottom:2px solid #FFF
}

.call{
    background:#df6b5e;
    border-radius:50px
}

.call a{
    font-weight:bold;
    padding:15px 25px 15px 25px !important
}

.call a:hover{
    border:none !important
}

I think problem is with top div (img-bg-container) because in css I have given height 100% & it's child div max:height:768px. Though problem solves if I keep min height instead max height in aspx page but How come it shows diiferent output when codes are same..

Answer 1

Do one thing. Right click on page and and select inspect element. and check both the page html and css. It will be easy to compare and find which css is not working.

Also check the form tag css as we place form tag above all HTML tags and inside body tag in asp.net. Usually HTML page do not have such structure. check and let me know.