проблема заключается в том что при приближение страницы, "Body сливается с контентом, из за чего строки текста в правой стороне не видно.
Подскажите пожалуйста в чем проблема
мой код css:
#fondo
{
padding: 8em 0em;
background-image: url(../images/objetivo.jpg);
background-position: center;
background-size: cover;
}
h2, h3 {
margin: 0;
padding: 0;
font-weight: 600;
color: #454445;
}
p, ol, ul {
margin-top: 0;
}
p {
line-height: 180%;
}
a {
color: #2C383B;
}
.container {
margin: 0px auto;
width: 1200px;
}
.miembros {
display: inline-block;
padding: 5%;
margin-left: 4px;
}
#nom {
margin-left: 42px;
float: center;
font-size: 1.5em;
color: rgb(32, 218, 8);
}
#arr {
font-size: 1.8em;
}
ul.style2 a {
display: inline-block;
margin-left: 1em;
}
ul.style2 li:first-child {
border-top: 0;
padding-top: 0;
}
ul.style2 .icon {
color: #FFF;
}
.button {
display: inline-block;
padding: 1.3em 3em;
background: #8dc63f;
letter-spacing: 0.20em;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
color: #FFF;
}
.button:hover {
background: #86bd3b;
}
.button-big {
padding: 1.6em 4em;
font-size: 1.4em;
font-weight: 900;
}
#nav {
background: #2b2b2b;
}
#header {
position: relative;
height: 100px;
}
#logo {
position: absolute;
top: 0.5em;
width: 56px;
height: 56px;
}
#menu {
position: absolute;
right: 0;
top: 1.6em;
}
#menu ul {
display: inline-block;
}
#menu li {
display: block;
float: left;
text-align: center;
}
#menu li a, #menu li span {
display: inline-block;
padding: 1em 1.5em 0em 1.5em;
letter-spacing: 0.10em;
text-decoration: none;
font-size: 1em;
text-transform: uppercase;
color: #FFF;
}
#banner {
overflow: hidden;
width: 1000px;
text-align: center;
color: rgba(255,255,255,.7);
font-size: 1.5em;
}
#banner a {
color: rgba(255,255,255,.9);
}
#banner h2 {
padding-bottom: 0.50em;
font-weight: 400;
font-size: 3em;
color: #FFF;
}
#banner .button {
margin-top: 2em;
background: #6fac1b;
}
#banner strong {
color: #FFF;
}
#banner span {
display: block;
padding-top: 0.20em;
text-transform: uppercase;
font-size: 1.2em;
color: #A2A2A2;
}
#envoltura {
background: #FFF;
}
#content {
padding: 0em 7em;
}
#piePagina {
padding: 6em 0em 10em 0em;
}
#piePagina p {
letter-spacing: 0.20em;
text-align: left;
text-transform: uppercase;
font-size: 0.80em;
color: rgba(255,255,255,0.3);
}
#piePagina a {
text-decoration: none;
color: rgba(255,255,255,0.6);
}
h4 {
color: rgba(255,255,255,0.3);
font-size: 30px;
float: right;
margin-right: 50px;
margin-top: 5px;
}
.reds {
float: right;
padding-left: 3%;
margin-top: 16px;
position: relative;
right: -12.9%;
line-height: 150px;
width: 40px;
height: 40px;
}
#contenido {
overflow: hidden;
padding: 10em;
background: rgb(255, 255, 255);
text-align: left;
}
#footer .title {
display: block;
padding-top: 1em;
text-transform: uppercase;
font-size: 0.80em;
color: rgba(255,255,255,0.5);
}
#footer .column1, #footer .column2 {
width: 560px;
}
#footer .column1 {
float: left;
}
.margin-btm {
overflow: hidden;
margin-bottom: 5em;
padding-bottom: 5em;
border-bottom: 1px solid rgba(0,0,0,.1);
}
.seccion1 p {
margin-left: 30px;
margin-right: 30px;
margin-top: 30px;
font-size: 1.3em;
}
.extra2 .seccion1 {
margin-left: 60px;
width: 1070px;
border-style: solid;
border-color: rgb(39, 212, 4);
}
#img {
width: 200px;
height: 190px;
margin-right: 30px;
margin-top: 20px;
float: right;
background-image: url(../images/cultura.jpg);
}
#video {
margin-left:230px;
margin-top: 50px;
}
#obj {
width: 200px;
height: 190px;
margin-right: 30px;
margin-top: -49px;
float: right;
background-image: url(../images/obj.jfif);
}
body {
position: relative;
margin: 0em;
background: #2b2b2b;
font-family: 'Source Sans Pro', sans-serif;
font-size: 11pt;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
<link href="css.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="nav">
<div id="header" class="container">
<div id="logo">
<span class="ccc"><a href="../inicio/inicio.html"><img id="logo" src="../images/logo.png"></a></span>
</div>
<div id="menu">
<ul class="bar">
<li><a class="noticias" href="../noticias/noticias.html">Noticias</a></li>
<li><a class="miembros" href="../miembros/miembros.html">Miembros</a></li>
<li><a class="objetivo" href="../objetivo/objetivo.html">Objetivo</a></li>
<li><a class="propuestas" href="../propuestas/propuestas.html">Propuestas</a></li>
<li><a class="formulario" href="../formulario/formulario.html">Formulario</a></li>
<li><a class="donativo" href="../donativo/donativo.html">Donativo</a></li>
</ul>
</div>
</div>
</div>
<div id="fondo">
<div id="banner" class="container">
<h2>Objetivo</h2>
</div>
</div>
</div>
<div id="envoltura">
<div id="contenido">
<div class="extra2 margin-btm container">
<div class="titulo-contenido">
</div>
<div class="extra2 container"></div>
<div class="seccion1">
<img id="img">
<p style="margin-left: 440px;">Objetivo general:</p>
<ul id="lista">
<li>Promover una cultura ambiental que permita el establecimiento de buenos hábitos y actitudes en los estudiantes y comunidad educativa en general de la sede Varital frente al cuidado y conservación del medio ambiente, alcanzando así la promoción del desarrollo sostenible.
</li>
</ul>
<br>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/T_jlqq461JU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<br>
<p style="margin-left: 440px;">Objetivos específicos:</p>
<ul id="lista">
<li>Reconocer el papel que juega las TICs para la promoción de campañas ambientales que ayuden a sensibilizar a estudiantes y comunidad educativa en general sobre los cuidados que deben tenerse en cuenta para asegurar un desarrollo sostenible del medio ambiente.</li><br>
<li>Identificar y comprender las causas de las principales amenazas y problemas ambientales que afectan nuestro planeta.</p><br>
<img id="obj">
<li>Prevenir y Controlar mediante el establecimiento de medidas preventivas los riesgos para la salud asociados a la gestión de residuos sólidos y contaminación del agua.</li>
<li>Instruir al estudiante y comunidad educativa en general sobre las técnicas de manejo de los sólidos domiciliarios para la reutilización de los mismos.</li>
<li> Estimular mediante el uso de variados recursos didácticos interactivos, la búsqueda de información y el interés por el conocimiento de la realidad ambiental que rodea a los estudiantes y comunidad educativa en general.</li>
<li>Establecer estrategias encaminadas a la protección de la calidad ambiental del entorno natural y social.</li>
<li>Comprender la importancia de reciclar y cuidar el medio ambiente.</li>
</ul>
</div>
</div>
</div>
</div>
<div id="piePagina" class="container">
<h4>Siguenos</h4>
<br>
<br>
<a href="www.facebook.com"><img class="reds" src="../images/fb.png"></a>
<a href="www.instagram.com"><img class="reds" src="../images/insta.png"></a>
<a href="www.twitter.com"><img class="reds" src="../images/tw.png"></a>
<p>© 2019 - 2020 Medio Ambiente and individual contributors content is available under <a href="../licencia/licencia.html">These Licenses</a></p>
</div>
</body>
</html>
´´´
html
, иначе ответить на Ваш вопрос невозможно. – Denis640Kb 15 фев '20 в 12:50