why are my div boxes widening whenever a large text is written? : i had been working on a project in the past days but i came across with a visual error that show my boxes doesn't have a proper right margin.

i had tried changing the flex on css but i didn't get other good results to fix this so i ha to scrap that idea

```<html>
	<head>
		<title>math lizard</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="nav">
			<ul>
				<a href=""><li>tema 1</li></a>
				<a href=""><li>tema 2</li></a>
				<a href=""><li>tema 3</li></a>
			</ul>
		</div>
    <div class="container-temas">
	<div class="tema">
		<img src="" class="thumbnail">
		<h2 class="titulo-tema">titulo del subtema</h2>
		<hr>
		<p class="descripcion-breve">Esta descripcion demuestra que tema se esta explicando</p>
		<a href=""><p class="boton-tema">Entrar</p></a>
	</div>
	<div class="tema">
		<img src="" class="thumbnail">
		<h2 class="titulo-tema">titulo del subtema</h2>
		<hr>
		<p>Esta descripcion demuestra que tema se esta explicando</p>
		<a href=""><p class="boton-tema">Entrar</p></a>
	</div>
	<div class="tema">
		<img src="" class="thumbnail">
		<h2 class="titulo-tema">titulo del subtema</h2>
		<hr>
		<p>Esta descripcion demuestra que tema se esta explicando</p>
		<a href=""><p class="boton-tema">Entrar</p></a>
	</div>
	<div class="tema">
		<img src="" class="thumbnail">
		<h2 class="titulo-tema">titulo del subtema</h2>
		<hr>
		<p>Esta descripcion demuestra que tema se esta explicando</p>
		<a href=""><p class="boton-tema">Entrar</p></a>
	</div>
	<div class="tema">
		<img src="" class="thumbnail">
		<h2 class="titulo-tema">titulo del subtema</h2>
		<hr>
		<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tincidunt vehicula. Sed nec ante molestie, dignissim sapien et, finibus felis. Mauris a enim eget sapien laoreet interdum id a tellus. Duis blandit et lorem non aliquet. Vivamus id tellus ut eros finibus tempor ac ac sem. Etiam lacinia nisl eu varius ullamcorper. Vestibulum finibus ligula aliquam ipsum fringilla, nec luctus dolor ultrices.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur est est, aliquet ut commodo at, luctus sit amet nunc. Aenean in aliquet neque, vitae commodo tellus. Nulla et semper massa. Quisque tristique turpis ante, non semper libero fringilla a. Praesent et arcu id massa semper iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
		<a href=""><p class="boton-tema">Entrar</p></a>
	</div>
    </div>
	</body>
</html>
```

```* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #003300;
}

.nav {
	background-color: #00b300;
	margin-bottom: 0%;
}

ul {
	margin-left: 75%;
}

li {
	padding: 20px;
	display: inline-block;
}

a { 
	text-align: center;
	color: white;
	list-style: none;
	text-decoration: none;
}

li:hover {
	-moz-transition-duration: 0.3s;
	background-color: #004d00;
}

.post {
	padding: 20px;
	background-color: white;
	margin-right: 5%;
	margin-left: 30%;
	margin-top: 5%;
	border-radius: 15px;
}

h1 {
	text-align: center;
}

.form {
	background-color: #404040;
	margin-left: 1%;
	margin-right: 70%;
	padding: 20px;
	border-radius: 15px;
}

.link {
	background-color: #19194d;
	margin-left: 15px;
	margin-right: 15px;
	padding: 10px;
	border-radius: 15px;
	color: white;
}

.link:hover {
	background-color: #0c0c27;
	-moz-transition-duration: 0.3s;
}

* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #003300;
}

.nav {
	background-color: #00b300;
	margin-bottom: 0%;
}

ul {
	margin-left: 75%;
}

li {
	padding: 20px;
	display: inline-block;
}

a { 
	text-align: center;
	color: white;
	list-style: none;
	text-decoration: none;
}

li:hover {
	-moz-transition-duration: 0.3s;
	background-color: #004d00;
}

.post {
	padding: 20px;
	background-color: white;
	border-radius: 15px;
}

h1 {
	text-align: center;
}

.form {
	background-color: #404040;
	padding: 20px;
	border-radius: 15px;
}

.link {
	background-color: #19194d;
	margin-left: 15px;
	margin-right: 15px;
	padding: 10px;
	border-radius: 15px;
	color: white;
}

.link:hover {
	background-color: #0c0c27;
	-moz-transition-duration: 0.3s;
}

/* Flex container */
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px;
}

  /* Make post larger than form */
  .post {
    flex: 3;
    margin-left: -65%;
  }

  .form {
    flex: 1;
  }

.tema {
	background-color: white;
	margin-top: 20px;
	margin-left: 2%;
	padding: 20px;
	border-radius: 15px;
}

.thumbnail {
	border: solid;
	width: 100%;
	height: 100px;
}

.titulo-tema {
	text-align: center;
}

.boton-tema {
	background-color: #00b300;
	text-align: center;
	padding: 20px;
	margin-left: 150px;
	margin-right: 150px;
	margin-top: 20px;
	border-radius: 15px;
}

.boton-tema:hover {
	background-color: #004d00;
	-moz-transition-duration: 0.3s;
}

.container-temas {
	display: flex;
	justify-content: space-between;
	padding: 20px;
	flex-wrap: wrap;
}
  
@media screen and (min-width: 480px) {
	ul {
		margin-left: 0%;
	}
	.container {
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  padding: 20px;
	}
	.post {
		margin-left: 0%;
		margin-bottom: -40%;
		margin-right: 0%;
	}
	.form {
		margin-right: 20%;
		margin-left: 20%;
	}
	li {
		padding: 70px;
	}
	h1 {
		font-size: 50px;
	}
	p {
		font-size: 40px;
	}
	.titulo-tema {
		font-size: 50px;
	}
}

@media screen and (min-width: 767px) {
	ul {
		margin-left: 35%;
	}
	.container {
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  padding: 20px;
	}
	.post {
		margin-left: 0%;
		margin-bottom: -80%;
		margin-right: 0%;
	}
	.form {
		margin-right: 20%;
		margin-left: 20%;
	}
	li {
		padding: 70px;
	}
	h1 {
		font-size: 70px;
	}
	p {
		font-size: 40px;
	}
	.titulo-tema {
		font-size: 70px;
	}
}

@media screen and (min-width: 1030px) {
	ul {
		margin-left: 75%;
	}
	.container {
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  padding: 20px;
	}
	.post {
		margin-left: -65%;
		margin-bottom: 0%;
		margin-right: 0%;
	}
	.form {
		margin-right: 70%;
		margin-left: 0%;
		margin-bottom: 0%;
	}
	li {
		padding: 20px;
	}
	h1 {
		font-size: 30px;
	}
	p {
		font-size: 20px;
	}
	.titulo-tema {
		font-size: 30px;
	}
}
```

i just expect to get a proper margin so this problem won't happend everytime a long text is posted on the index