1

Aquí esta el ejemplo para que vean como no están centradas ni las imágenes ni el vídeo https://alexandrawp.herokuapp.com/paginas%20principales/acceso%20incognito.html

Este es el código del video

<iframe width="560" height="315" src="https://www.youtube.com/embed/_SajWbVcewY?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
aquí el código de ejemplo de una imagen

<img class="mobile" src="./4/3.jpg" alt="3">

amigo de display flex no funcionó

* *, *::before, *::after{ box-sizing: border-box; padding: 0; margin: 0;}
    body {
	background: #000000;
	color: #000000;
} 
header, footer {
	background: #000000;
	width: 90%;
	max-width: 100%;
	max-height: 30%
	margin:20% auto;

}

h2{
	text-align: center;
}
 p {
 	font-family: Sans-serif;
  }


header nav {
	background: #000000;
	overflow: hidden;
}
header nav ul {
	list-style: none;
}
header nav ul li {
	float:right;
}
	header nav ul li a {
		padding: 3% 6%;
		display: block;
		color: #fff;
		text-decoration: none;


	}
	 header nav ul li a:hover {
	 	background: #55d737;
	 }
	
.main {
  background: #000000;
  display: flex;
  padding: : 0%
  
} 


.main aside,
.main .article{
  padding: 3%;
  box-sizing:border-box;
}

.main .iz{
  width: 15%;
}
.main .de {
	width: 15%
}
.iz{
  background: black;
  color: #fff;
  order: 1;
}

.de{
  background: white;
  order: 3;
}

.article{
  order: 2;
  width: 70%;
  background: white;
}

article{
  background: white;
  margin: 5% auto;
}

footer {
background: #000;
color:#fff;
clear:both
padding:10% 0%;
text-align: center;
}

.centro {
	text-align: center;
}

a.open{
	background-color: #414141;
	border-radius: 5%;
	color: #fff;
	font-size: 0.5em;
	margin: 20px;
	padding: 10px 20px;
	text-decoration: none;
	text-shadow: 2% 2% 0% #000;
}

section.modalDialog{
	background-color: white;
	bottom: 0;
	top:0;
	left: 0;
	right: 0;
	position: fixed;
	display: none;
	z-index: 2;
}

section.modalDialog:target{
	display: block;
}

a.close{
	background-color: #414141;
	border-radius: 5%;
	color: #fff;
	font-size: 60%;
	font-weight: bold;
	line-height: 22%;
	position: absolute;
	right: 1%;
	top:2%;
	text-align: center;
	text-decoration: none;
	width: 3%;
}

a.close{
	background-color: #000;
}

section.modal{
	background-color: #111;
	box-shadow: 0% 0% 10% #000;
	border-radius: 5%;
	color: #fff;
	margin: 5% auto;
	padding: 5%;
	position: relative;
	width: 60%;
	 max-height: 80vh; /*O lo que quieras o veas que se adpate mejor*/
  /*overflow: auto; u otra opción es que solo sea en la altura el scroll*/
  overflow-y: auto;
  overflow-x: none;
}




.diferencia {
	color: #fff;
	font-size: 2em;
	margin-bottom: 10px;
}

.diferente{
	color: #fff;
	font-size: 1.2em;
}
/** Posible Solución a la pregunta **/

@media all and (max-width:800px) {
 .main{
 display:block;
 width:100%;
 }
 .main .iz {
 display:inline-block;
 width:100%;
 height:100%;
 margin:0 auto;
 }
 .main .de {
 display:inline-block;
 width:100%;
 height:100%;
 margin:0 auto;
 }
 .de p {
 width:90%;
 margin:0 auto;
 display:inline;
 }
 .iz p {
 width:90%;
 margin:0 auto;
 display:inline;
 }
 .article {
 width:100%;
 margin:0 auto;
 }
 article {
 margin:1% auto;
 }}

 @media (max-width: 800px){
  .mobile{ 
    width: 100%;
  }

@media (max-width: 800px){
  iframe { 
    width: 100%;
  }
  

.padre{
    display: flex;
    flex-wrap: wrap;
    align-content: center;  // Esta propidad solo funciona si tienes mas de una linea de elementos
    justify-content: center;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>acceso incognito, directo desde el icono</title>
  

<link rel="shortcut icon" type="image/x-icon" href="../imagenes/ale2.jpg">
<link rel="stylesheet" type="text/css" href="../css/estilos.css">
</head>
<body>
	<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.11';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<header>
  

<div class="logotipo"><img src="../imagenes/ale2.jpg" width="70" alt="Alexandra Loor"> </div>
  <aside class="arriba">
    <h3></h3>
    <p></p>
  </aside>
  <nav>
  <ul><li><div class="contenedor">
     <a href="../home.html" class="open">INICIO</a>
  </div>
</li>
    <li><div class="contenedor">
      <a href="#openmodal1" class="open"> ACERCA DE </a>
      <section id="openmodal1" class="modalDialog">
        <section class="modal">
          <a href="#close" class="close"> X </a>
          <h2 class="diferencia"> acerca de</h2>
          <p class="diferente">Este sitio abarca tutoriales para dar soluciones destinadas a resolver dudas acerca de todo tipo de ideas útiles para el internauta</p>
        </section>
      </section>
    </div></li>
    <li><div class="contenedor">
      <a href="#openmodal2" class="open">POLITICA DE PRIVACIDAD</a>
      <section id="openmodal2" class="modalDialog">
        <section class="modal">
          <a href="#close" class="close"> X </a>
          <h2 class="diferencia"> politica de privacidad</h2>
          <p class="diferente">Esta permitido compartir todo el contenido de este sitio, más no está permitido copiar cual fiel copia, para usarlo en el desarrollo de otro sitio web, todo o parte del contenido de mi sitio web. En cualquier caso que se inserte cualquier parte del contenido en otro sitio web se deberá hacer referencia de que se está compartiendo el contenido y de forma notoria que dicho contenido es de mi autoria: Susana Alexadra Loor García y de que se extrajo de: <a href="https://alexandrawp.herokuapp.com">https://alexandrawp.herokuapp.com/</a> Por lo tanto se establece que se respetará este sitio web como propiedad de la autora, y nadie se podrá adujudicar a su autoria todo del contenido de dicho sitio</p>
        </section>
      </section>
    </div></li>
    <li><div class="contenedor">
      <a href="#openmodal3" class="open"> CONTACTO</a>
      <section id="openmodal3" class="modalDialog">
        <section class="modal">
          <a href="#close" class="close"> X </a>
          <h2 class="diferencia"> CONTACTO</h2>
          <p class="diferente">Comunicate con nosotros a este correo [email protected]</p>
        </section>
      </section>
    </div> </li>
    
<li><div class="contenedor"><a target="_blank" class="open" 

href="https://www.youtube.com/channel/UCsYcSASeuWbHFBZJXy6SJEA

?sub_confirmation=1">YOUTUBE</a>
       </div>
 </li>
  </ul>
      </nav>
    </header>
		<section class="main"><aside class="de">
    <h3></h3>
    <p><a href="#">acceso a incognito desde el icono principal</a></p><br>
<p><a href="captura de pantalla.html"> capturar pantalla sin paint</a></p><br>

<p><a href="clavewindows.html">conocer la clave de windows instalada en tu equipo</a></p><br>

<p><a href="configmicrofono.html">configurar el microfono para que se escuche bien en audio/video</a></p><br>

<p><a href="convertir ventana a pestaña.html">convertir ventana a pestaña y viceversa</a></p><br>

<p><a href="cookies chrome.html">desactivar, activar cookies en chrome</a></p><br>

<p><a href="cortar video.html">cortar video de youtube</a></p><br>

<p><a href="direccion ip.html">conocer dns, direccion ip, gategay o puerta de enlace predeterminada y mascara de subred</a></p><br>

<p><a href="enviar mensaje masivo.html">enviar mensaje masivo outlook office</a></p><br>

<p><a href="excepciones avira.html">añadir excepciones a avira</a></p><br>

<p><a href="google ncr.html">hacer busquedas globales y en cualquier idioma</a></p><br>

<p><a href="grabadora.html">localizar los archivos de la grabadora de sonido</a></p><br>

<p><a href="guardar sesión chrome.html">guardar sesion en chrome rapidamente</a></p><br>

<p><a href="k de youtube.html">averigua que significa la k en youtube</a></p><br>

<p><a href="ocultar video.html">ocultar informacion y partes de video</a></p><br>

<p><a href="rejected git push heroku master.html">solucionar el error de rejected git push heroku master</a></p><br>

<p><a href="traducir texto.html">traducir texto rapidamente</a></p><br>

<p><a href="vista windows.html">gesto del mouse pack para cambio inesperado de aplicaciones en windows</a> </p><br>
  </aside>
  <aside class="iz">
    <h3></h3>
     <div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse">Compartir</a></div>

     <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- Place this tag where you want the share button to render. -->
<div class="g-plus" data-action="share" data-href="https://alexandrawp.herokuapp.com/"></div>
  </aside>
  <section class="article">
    <article>
      <h2>Acceso directo a incognito desde el icono principal</h2><br>
      <div class="padre"><iframe width="560" height="315" src="https://www.youtube.com/embed/_SajWbVcewY?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>

      	<p align="justify"> Al hacer doble clic en el navegador google chrome se nos abre por defecto una ventana que no está incognito. Si queremos configurarlo para que automáticamente se nos abra una ventana en incognito: <p> <br>

<p align="justify">Hacer clic derecho en el icono del escritorio del navegdor.
Clic izquierdo en propiedades.</br> <img class="mobile" src="./4/3.jpg" alt="3"><br>
En la entrada de destino dejamos un espacio y escribimos -incognito
clic en aplicar, clic en continuar, clic en aceptar. <br> <img class="mobile" src="./4/2.jpg" alt="2"></p>
</br>
<p align="justify">Ya tenemos el icono configurado para  abrir en modo incognito.
Yo tenia antes de configurarlo un icono en la barra de tareas, (para poner un icono en la barra de tareas hacer clic derecho sobre el icono en el escritorio y hacer clic donde dice anclar a la barra de tareas).
</p><br>
<p aling="justify">Ahora podemos tener dos iconos uno en el escritorio para que se abra en modo incongnito y otro en la barra de tareas que se abra en modo normal, o viceversa.</p><br>

<p aling="justify">Para configurar el icono en la barra de tareas solo hacemos clic derecho sobre este icono y despues clic derecho sobre google chrome, (en la primera seccion de abajo no donde dice tareas) y clic izquierdo sobre propiedades y ya tenemos la ventana en la barra de destino donde podemos borrar .incognito si ya esta escrito o escribirlo tal como se ha indicado <br>
  <img class="mobile" src="./4/1.jpg" alt="1">
</p>
    </article>
  </section>
  
</section>
		
			
	<footer><p>Portoviejo-Manabí-Ecuador</p></footer>
		

<!-- Place this tag in your head or just before your close body tag. -->
<script src="https://apis.google.com/js/platform.js" async defer></script>
</body>
</html>

amigo que me ayudastes con esto article iframe, article * .mobile { margin: 0 auto; display: block; } hay imagenes que no se centran

* *, *::before, *::after{ box-sizing: border-box; padding: 0; margin: 0;}
    body {
	background: #000000;
	color: #000000;
} 
header, footer {
	background: #000000;
	width: 90%;
	max-width: 100%;
	max-height: 30%
	margin:20% auto;

}

h2{
	text-align: center;
}
 p {
 	font-family: Sans-serif;
  }


header nav {
	background: #000000;
	overflow: hidden;
}
header nav ul {
	list-style: none;
}
header nav ul li {
	float:right;
}
	header nav ul li a {
		padding: 3% 6%;
		display: block;
		color: #fff;
		text-decoration: none;


	}
	 header nav ul li a:hover {
	 	background: #55d737;
	 }
	
.main {
  background: #000000;
  display: flex;
  padding: : 0%
  
} 


.main aside,
.main .article{
  padding: 3%;
  box-sizing:border-box;
}

.main .iz{
  width: 15%;
}
.main .de {
	width: 15%
}
.iz{
  background: black;
  color: #fff;
  order: 1;
}

.de{
  background: white;
  order: 3;
}

.article{
  order: 2;
  width: 70%;
  background: white;
}

article{
  background: white;
  margin: 5% auto;
}

footer {
background: #000;
color:#fff;
clear:both
padding:10% 0%;
text-align: center;
}

.centro {
	text-align: center;
}

a.open{
	background-color: #414141;
	border-radius: 5%;
	color: #fff;
	font-size: 0.5em;
	margin: 20px;
	padding: 10px 20px;
	text-decoration: none;
	text-shadow: 2% 2% 0% #000;
}

section.modalDialog{
	background-color: white;
	bottom: 0;
	top:0;
	left: 0;
	right: 0;
	position: fixed;
	display: none;
	z-index: 2;
}

section.modalDialog:target{
	display: block;
}

a.close{
	background-color: #414141;
	border-radius: 5%;
	color: #fff;
	font-size: 60%;
	font-weight: bold;
	line-height: 22%;
	position: absolute;
	right: 1%;
	top:2%;
	text-align: center;
	text-decoration: none;
	width: 3%;
}

a.close{
	background-color: #000;
}

section.modal{
	background-color: #111;
	box-shadow: 0% 0% 10% #000;
	border-radius: 5%;
	color: #fff;
	margin: 5% auto;
	padding: 5%;
	position: relative;
	width: 60%;
	 max-height: 80vh; /*O lo que quieras o veas que se adpate mejor*/
  /*overflow: auto; u otra opción es que solo sea en la altura el scroll*/
  overflow-y: auto;
  overflow-x: none;
}




.diferencia {
	color: #fff;
	font-size: 2em;
	margin-bottom: 10px;
}

.diferente{
	color: #fff;
	font-size: 1.2em;
}

article iframe, 
article * .mobile {
    margin: 0 auto;
    display: block;
}
/** Posible Solución a la pregunta **/

@media all and (max-width:800px) {
 .main{
 display:block;
 width:100%;
 }
 .main .iz {
 display:inline-block;
 width:100%;
 height:100%;
 margin:0 auto;
 }
 .main .de {
 display:inline-block;
 width:100%;
 height:100%;
 margin:0 auto;
 }
 .de p {
 width:90%;
 margin:0 auto;
 display:inline;
 }
 .iz p {
 width:90%;
 margin:0 auto;
 display:inline;
 }
 .article {
 width:100%;
 margin:0 auto;
 }
 article {
 margin:1% auto;
 }}

 @media (max-width: 800px){
  .mobile{ 
    width: 100%;
  }

@media (max-width: 800px){
  iframe { 
    width: 100%;
  }
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>rejected git heroku</title>
  

<link rel="shortcut icon" type="image/x-icon" href="../imagenes/ale2.jpg">
<link rel="stylesheet" type="text/css" href="../css/estilos.css">
</head>
<body>
	<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.11';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<header>
  

<div class="logotipo"><img src="../imagenes/ale2.jpg" width="70" alt="Alexandra Loor"> </div>
 <aside class="arriba">
    <h3></h3>
    <p></p>
  </aside>
  <nav>
  <ul><li>
  <div class="contenedor">
     <a href="../home.html" class="open">INICIO</a>
  </div>
</li>
    <li><div class="contenedor">
      <a href="#openmodal1" class="open"> ACERCA DE </a>
      <section id="openmodal1" class="modalDialog">
        <section class="modal">
          <a href="#close" class="close"> X </a>
          <h2 class="diferencia"> acerca de</h2>
          <p class="diferente">Este sitio abarca tutoriales para dar soluciones destinadas a resolver dudas acerca de todo tipo de ideas útiles para el internauta</p>
        </section>
      </section>
    </div></li>
    <li><div class="contenedor">
      <a href="#openmodal2" class="open">POLITICA DE PRIVACIDAD</a>
      <section id="openmodal2" class="modalDialog">
        <section class="modal">
          <a href="#close" class="close"> X </a>
          <h2 class="diferencia"> politica de privacidad</h2>
          <p class="diferente">Esta permitido compartir todo el contenido de este sitio, más no está permitido copiar cual fiel copia, para usarlo en el desarrollo de otro sitio web, todo o parte del contenido de mi sitio web. En cualquier caso que se inserte cualquier parte del contenido en otro sitio web se deberá hacer referencia de que se está compartiendo el contenido y de forma notoria que dicho contenido es de mi autoria: Susana Alexadra Loor García y de que se extrajo de: <a href="https://alexandrawp.herokuapp.com">https://alexandrawp.herokuapp.com/</a> Por lo tanto se establece que se respetará este sitio web como propiedad de la autora, y nadie se podrá adujudicar a su autoria todo del contenido de dicho sitio</p>
        </section>
      </section>
    </div></li>
    <li><div class="contenedor">
      <a href="#openmodal3" class="open"> CONTACTO</a>
      <section id="openmodal3" class="modalDialog">
        <section class="modal">
          <a href="#close" class="close"> X </a>
          <h2 class="diferencia"> CONTACTO</h2>
          <p class="diferente">Comunicate con nosotros a este correo [email protected]</p>
        </section>
      </section>
    </div> </li>
    <li><div class="contenedor"><a target="_blank" class="open" href="https://www.youtube.com/channel/UCsYcSASeuWbHFBZJXy6SJEA?sub_confirmation=1">YOUTUBE</a>
       </div>
 </li>
  </ul>
      </nav>
    
    </header>
		<section class="main"><aside class="de">
    <h3></h3>
    <p><a href="acceso incognito.html">acceso a incognito desde el icono principal</a></p><br>
<p><a href="captura de pantalla.html"> capturar pantalla sin paint</a></p><br>

<p><a href="clavewindows.html">conocer la clave de windows instalada en tu equipo</a></p><br>

<p><a href="configmicrofono.html">configurar el microfono para que se escuche bien en audio/video</a></p><br>

<p><a href="convertir ventana a pestaña.html">convertir ventana a pestaña y viceversa</a></p><br>

<p><a href="cookies chrome.html">desactivar, activar cookies en chrome</a></p><br>

<p><a href="cortar video.html">cortar video de youtube</a></p><br>

<p><a href="direccion ip.html">conocer dns, direccion ip, gategay o puerta de enlace predeterminada y mascara de subred</a></p><br>

<p><a href="enviar mensaje masivo.html">enviar mensaje masivo outlook office</a></p><br>

<p><a href="excepciones avira.html">añadir excepciones a avira</a></p><br>

<p><a href="google ncr.html">hacer busquedas globales y en cualquier idioma</a></p><br>

<p><a href="grabadora.html">localizar los archivos de la grabadora de sonido</a></p><br>

<p><a href="guardar sesión chrome.html">guardar sesion en chrome rapidamente</a></p><br>

<p><a href="k de youtube.html">averigua que significa la k en youtube</a></p><br>

<p><a href="ocultar video.html">ocultar informacion y partes de video</a></p><br>

<p><a href="#">solucionar el error de rejected git push heroku master</a></p><br>

<p><a href="traducir texto.html">traducir texto rapidamente</a></p><br>

<p><a href="vista windows.html">gesto del mouse pack para cambio inesperado de aplicaciones en windows</a> </p><br>
  </aside>
  <aside class="iz">
    <h3></h3>
    <div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse">Compartir</a></div>

    <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


<!-- Place this tag where you want the share button to render. -->
<div class="g-plus" data-action="share" data-href="https://alexandrawp.herokuapp.com/"></div>
  </aside>
  <section class="article">
    <article>
      <h2>Solución al problema rejected con git push heroku master</h2><br>

      <div class="padre"><iframe width="560" height="315" src="https://www.youtube.com/embed/ghRH3_UPw-s?start=50" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>

      	<p>Yo tenia el siguiente problema. Cuando trataba de implementar los cambios desde git a heroku
me salia esta mensaje de aquí:</p> <br>
<p>$ git push heroku master To https://git.heroku.com/loor.git ! [rejected] master -> master (fetch first) error: failed to push some refs to 'https://git.heroku.com/loor.git' hint: Updates were rejected because the remote contains work that you do hint: not have locally. This is usually caused by another repository pushing hint: to the same ref. You may want to first integrate the remote changes hint: (e.g., 'git pull ...') before pushing again. hint: See the 'Note about fast-forwards' in 'git push --help' for details. </p><br>

<p>si yo por ejemplo hacia algun cambio en mi archivo html con sublime text y lo guardaba y cuando yo queria implementar los cambios con git push heroku master me salia este mensaje.</p><br>

<p>¿cómo se implementan los cambios para actualizar una página web?</p><br>
<ul>
<li>Primeramente ir a cmd (teclas windows R) escribir allí heroku login, esperar que pida el nombre de usuario, escribirlo, hacer enter y posteriormente nos pedirá la cotraseña, </li>
<img class="mobile" src="./16/1.png" alt="1"><br>
<li>Despues tiene que abrir el git bash y localizar su carpeta. Para ello van a usar el siguiente comando cd  unespacionombredesucarpeta </li><br>
<li>o si está en el escritorio primero escribir cd desktop ,hacen enter y despues escriben cd unespacionombredesucarpeta </li>
</ul><br>

<p>Si no pueden ingresar a su carpeta con el comando cd nombre de la carpeta, cierren git bash y vuelvan a abrirlo y utilicen un numero como nombre de la carpeta, ejemplo cd 1 o un nombre sin espacio</p><br>

<p>Si yo hice algún cambio al archivo html u otro archivo o agregué otros archivos escribo el comando git status y presiono enter y ahí me dice que he modificado un archivo</p><br>

<p>Antes de continuar de darles la solución final algo que también hice fué clonar el repositorio</p><br>

<p>Yo tenia mi ubicación de ese proyecto en el escritorio y yo clone el repositorio lo cual me genero otra carpeta de ese mismo proyecto en una ubicación diferente,</p><p> esta última es la que ahora cuenta. Esta ubicación será la que por defecto indica git bash en la parte superior de su ventana. Lo cloné con estos pasos que están aquí</p><br>

<ul>
<li>$ heroku git:clone -a loor</li><br>
<li>$ cd loor</li>
</ul><br>
<p>Mi aplicación en heroku se llama loor por lo tanto eso era lo que tenia que escribir es esas dos líneas.</p></br>

<p>Despues de clonar el repositorio cerrar git bash y abrirlo de nuevo y ahora sí implementamos los cambios con estos pasos:</p><br>

<ul>
<li>escribir cd nuevaubicaciondeproyecto</li><br>
<li>git init</li><br>
<li>git status</li><br>
<li>git add -A</li><br>
<li>git commit -m "aqui escribir un mensaje de su preferencia"</li>
<li>git push heroku master.</li><br>
<img class="mobile" src="./16/2.png" alt="2">
</ul>

<p>El comando cd init es necesario utilizarlo la primera vez que ustedes entran a su carpeta desde git bash con el comando cd, si lo utilizan seguidamente es indeferente no afecta al momento de deploy osea implementar los cambios.</p><br>

<p>Presionar enter entre cada comando, pero al momento de hacer enter a git push heroku master me salia el error.
 Lo que hice fué escribir esto:</p><br>

<p>git push heroku mater -f</p><br>
<img class="mobile" src="./16/3.png" alt="3">
<img class="mobile" src="./16/4.png" alt="4">
<p>Con eso se soluciona ese problema.</p><br>
<p> Actualicé mi sitio web y me aparecieron los cambios en la página y la próxima vez que quieran implementar un nuevo cambio, seguir los pasos anteriores (ya no es necesario clonar el repositorio) y al escribir la última línea solamente escribir git push heroku master sin la -f y enter y a disfrutar de su página
</p>
    </article>
  </section>
  
</section>
		
			
	<footer><p>Portoviejo-Manabí-Ecuador</p></footer>
		
 <!-- Place this tag in your head or just before your close body tag. -->
<script src="https://apis.google.com/js/platform.js" async defer></script>

</body>
</html>

3 respuestas 3

2

estuve revisando tu código.

En realidad es relativamente facil, tienes que agregar esto al final de tus estilos css y antes de los media queries:

article iframe, 
article * img {
    margin: 0 auto;
    display: block;
}

Si algo falla en alguna vista responsive, escribe por comentarios.

Éxitos!

11
  • eres un rey!! me funcionó había aumentado los div clase padre, ahí los dejo? Commented el 31 ene. 2018 a las 20:09
  • Si ves que visualmente no presenta ningún problema aumentar los div, claro que puedes! pero siempre revisa bien que no te presente ninguna problema en otras dimensiones. Éxitos! Commented el 31 ene. 2018 a las 20:11
  • article iframe, article * .mobile { margin: 0 auto; display: block; } Asi estaria bien esque en home me salen las imagenes una abajo de la otra y eso no quiero? Commented el 31 ene. 2018 a las 20:15
  • Un consejo, en cada página que tengas, puedes ahorrarte el problema de que algunos estilos de unas páginas afecten a otras. Solo agrega una clase descriptiva al body por ejemplo <body class="home"> ; <body class="post tutorial"> y en este caso solo añadirías, .tutorial .mobile { display: block; margin: auto;} así no afectarías otras imagenes con esta clase en otras páginas. ;) Commented el 31 ene. 2018 a las 20:19
  • 1
    En realidad, yo te puse el selector article * .mobile, porque el asterisco es para indicar que cualquier imagen dentro de un elemento (el que sea) en cualquier articulo se le aplicaba este estilo, pero si no esta dentro de nada, no funcionará, por lo que te tocaría usar una combinación de dos selectores para ambos casos, separados por comas article * .mobile, article .mobile {...} . Commented el 31 ene. 2018 a las 22:19
0

puedes crear un div encima de esos elementos y poner una clase común que centre los elementos que coloques en ella:

.centrado{
 width: 100%;
  text-align: center;
}
<div class="centrado">
 <!--Aqui va mi imagen o mi iframe-->  
   
 </div>

Espero sea de ayuda.

Saludos.

0

Puedes centrar tus elementos haciendo uso de la propiedad display: flex

HTML:

<div class="padre">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/_SajWbVcewY?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

CSS:

.padre {
        display: flex;
        flex-wrap: wrap;
        aling-content: center;  // Esta propidad solo funciona si tienes mas de una linea de elementos
        justify-content: center;
    }

.

4
  • en que orden debo ponerlo? ya que tengo mcuho codigo css, ¿lo pondré al principio? Commented el 31 ene. 2018 a las 19:35
  • si, puedes ponerlo donde te parezca, aunque yo en lo particular lo pondria siguiendo el orden tambien de los demas elementos html que tengas Commented el 31 ene. 2018 a las 20:04
  • amigo no funcionó lo de display flex ayuda!!! Commented el 31 ene. 2018 a las 20:06
  • Quita el comentario en el align-content, que con eso a mi no me alineaba, talvez te pasa lo mismo a ti Commented el 31 ene. 2018 a las 22:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.