Es un comportamiento habitual, pero la solución es bien simple: Usa padding en el contenedor padre, en lugar de margin en el hijo. Así te evitas el problema que has descrito, que el margin se aplica al padre y al hijo a la vez. No sé explicar el motivo por el que ocurre, pero como te digo, es algo que ocurre a menudo, en cuyo caso la prácica es usar padding en vez de margin.
De todos modos, otra sugerencia que me gustaría hacerte es que, para hacer un centrado, uses Flexbox, que te facilita mucho la maquetación.
Si tienes un elemento que que tiene que aparecer centrado en su contenedor, entonces usas "display: flex;" y "justify-content: center;".
Te paso un ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Margin centrado con flexbox</title>
<style>
.container {
background-color: brown;
display: flex;
justify-content: center;
height: 600px;
width: 800px;
}
.content {
background-color: orange;
margin-top: 15px;
height: 500px;
width: 600px;
}
</style>
</head>
<body>
<div class="container">
<div class="content"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Ex exercitationem quam illum aliquid officiis ea, molestiae, modi sequi sapiente doloribus eveniet, quos natus.</p></div>
</div>
</body>
</html>
Miguel Angel
3280
145
214
17