0
Ich möchte den Rand meiner Website korrigieren. Ich habe alles versucht, aber bis jetzt hat noch nichts funktioniert. Es könnte ein Problem mit dem HTML-Code oder meinem CSS-Code geben.
Hier ist ein Screenshot von meiner Seite:Html Seitenrand Fehler
ich einige Eigenschaften hinzugefügt haben, um den Text in der Navigationsleiste zentriert auszurichten und auch einige lineare Verläufe angewendet.
Das Problem ist, dass der Flüssigkeitsbehälter einen Randfehler hat.
Nicht sicher, was ich falsch mache. Jede Hilfe wäre willkommen.
Vielen Dank im Voraus.
.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 a {
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 a {
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>
Ich bin mir nicht sicher, ob ich Ihnen völlig folge ... Ist das Problem, dass Sie einen linken und rechten Rand haben und keine Marge erwarten? – cwanjt
Dies ist eine Aufnahme von meiner Seite –