html5 - Html page margin error -
i want correct margin of website. tried nothing worked far. there might problem html code or css code.
here screenshot of site:
i have added properties align text in navbar centered , applied linear gradients.
the problem fluid container has margin error.
not sure i'm doing wrong. appreciated.
thanks in advance.
.navbar-defaul { color: #cc3333; background-color: #cc3333; } @font-face { font-family: blanch-condensed; src: url(blanch_condensed.otf); } @font-face { font-family: hardware-condensed; src: url(ddchardware-condensed.otf); } .logo { width: 43%; height: 43%; background-size: auto 100%; background-repeat: no-repeat; margin: auto; display: block; } #gradiente1 { background: linear-gradient( rgb(0, 171, 235) 20%, rgba(136, 222, 255, 1.00) 75%); } .nav.navbar-nav li { color: black; } .navbar-default { margin: auto; background: greenyellow; } .nav.navbar-nav { display: inline-block; left: 0; right: 0; text-align: center; width: 100%; } .nav.navbar-nav li, .nav.navbar-nav li { display: inline; float: none; line-height: 40px; } .right.carousel-control { background: linear-gradient( rgb(0, 171, 235) 10%, rgba(136, 222, 255, 1.00) 75%); } .item.active, .carousel-inner { background: linear-gradient( rgb(0, 171, 235) 10%, rgba(136, 222, 255, 1.00) 75%); }<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- bootstrap librerias1 --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rhyon1irsvxv4nd0jutlngaslcjuc7uwjduw9svrlvryoopp2bwygmgjqixwl/sp" crossorigin="anonymous"> <link rel="stylesheet" href="casadelnino.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- fin de bootstrap librerias1 --> <title>casa del niño</title> <!----jquery script---> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!----jquery script---> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-12" id="gradiente1"> <img src="imagenes/logo - copia.png" class="logo"> </div> <div class="row"> <div class="col-md-12"> <nav class="navbar navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="#">conozcanos</a></li> <li><a href="#">derechos y deberes del usuario</a></li> <li><a href="#">responsabilidad social</a></li> <li><a href="#">correo corporativo</a></li> </ul> </div> </nav> </div> </div> <div class="row"> <div class="col-md-12"> <div id="mycarousel" class="carousel slide" data-ride="carousel"> <!-- indicadores --> <ol class="carousel-indicators"> <li data-target="#mycarousel" data-slide-to="0" class="active"></li> <li data-target="#mycarousel" data-slide-to="1"></li> <li data-target="#mycarousel" data-slide-to="2"></li> </ol> <!-- plantilla slider --> <div class="carousel-inner"> <div class="item active"> <img src="imagenes/20130819180519.jpg" class="img-responsive" alt="cnino1" style="width: 70%; height: 100%; margin:0 auto;"> </div> <div class="item"> <img src="imagenes/20130819180556.jpg" class="img-responsive" alt="cnino2" style="width: 70%; height:100%; margin:0 auto"> </div> <div class="item"> <img src="imagenes/20130819180644.jpg" class="img-responsive" alt="cnino3" style="width: 70%;height: 100%; margin:0 auto"> </div> </div> <!-- controles del slide --> <a class="right carousel-control" href="#mycarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">next</span> </a> </div> </div> </div> </div> </div> </body> </html>
don't add row inside row. missed close row containing logo. please update markup accordingly.
<div class="row"> <div class="col-md-12" id="gradiente1"> <img src="imagenes/logo - copia.png" class="logo"> </div> </div> 
Comments
Post a Comment