我正在创建一个网站，该网站的标题，左侧的侧边栏，位于中心的主要内容（将在其中显示信息），右侧的侧边栏和包含图像或其他内容的页脚。页眉和页脚未包含在网格模板中。
对于这个问题，我仅关注以下类别：.sidebar(left-sidebar aka a table of content or index), .contenido-carrera(information displayed),和.publicidad(right-sidebar)
所有部分都是使用这段CSS定义的
.carrera-grid {
margin: 120px 12px;
display: inline-grid;
grid-template-columns: 230px fit-content(80ch) 170px;
grid-gap: 10px;
}
您可以说中心的内容是迄今为止最大的内容。第一个侧边栏将包含诸如Wikipedia上的“目录”之类的元素列表，并将保留170px的元素以进行宣传。
.sidebar {
display: inline-block;
position: relative;
top: 50px;
}
.publicidad {
border: 1px solid black;
text-align: center;
display: inline-block;
position: relative;
display: flex;
justify-content: start;
align-items: center;
left: 10px;
top: 50px;
flex-flow: column;
}
.publicidad > div {
height: 200px;
border: 1px solid blue;
width: 120px;
margin: 6px;
}
我试图仅将display:flex设置在居中元素.contenido-carrera上，但这会导致不希望的/不需要的布局/设计，使所有项目失去它们之间的宽度和空间，而没有使用固定的用于网格的空间。
.contenido-carrera {
text-align: justify;
display: inline-block;
position: relative;
bottom: 90px;
}
https://streamable.com/b6itn 如您所见，居中元素上的项目本身受到溢出的影响。那么，如何使它尽可能地响应呢？考虑过要使用媒体查询，但目前正在此页面上运行引导程序，因此我不想阻挠它。
就像前面提到的，页眉和页脚被排除在网格模板之外。
<main class="carrera-grid">
<div class="sidebar">
<ol>
<label>Tabla de Contenidos</label>
<li>¿Qué es la Mercadotecnia?</li>
<li>Objetivos de la Mercadotecnia</li>
<li>Tipos de Mercadotecnia</li>
<li>Importancia de la Mercadotecnia</li>
<li>Para qué nos Sirve la Mercadotecnia</li>
<ul> <!-- Inicio de PRIMERA subdivision de lista-->
<li>Crear una imagen corporativa</li>
<li>Atraer clientes</li>
<li>Mejora la estrategia de publicidad</li>
<li>Tomar decisiones</li>
</li>
</ul> <!-- Fin de PRIMERA subdivision de lista-->
<li>Ejemplos de Mercadotecnia</li>
<ol> <!-- Inicio de SEGUNDA subdivision de lista-->
<li>Uber</li>
<li>Whirlpool</li>
<li>Andes Bar 45</li>
<li>Netflix</li>
<li>Walmart</li>
</ol> <!-- Fin de SEGUNDA subdivision de lista-->
<li>Cuáles son los elementos de un Plan de Mercadotecnia o Plan de Marketing</li>
<ol> <!-- Inicio de TERCERA subdivision de lista-->
<li>Investigación</li>
<li>Producto</li>
<li>Análisis de la competencia</li>
<li>Presupuesto</li>
<li>Precio, posicionamiento y marca</li>
<li>Traza objetivos reales</li>
<li>Monitorea y analiza los resultados</li>
</ol> <!-- fIN de TERCERA subdivision de lista-->
<li>Cómo definir una estrategia de Marketing Online</li>
<li>Conclusión</li>
</ol>
</div>
<div class="contenido-carrera">
<h1>¿Qué es la Mercadotecnia?</h1>
<p style="font-weight: bold;">La mercadotecnia es un conjunto actividades que se realizan para identificar las necesidades de un
público determinado con el objeto de brindarle productos o servicios para satisfacerlos de la forma más adecuada.</p>
<p>La mercadotecnia se encarga del proceso de planificación de las actividades de la empresa en relación con: el precio, la promoción,
distribución y venta de bienes y servicios que ofrece.</p>
<p><strong>Ayuda a definir el producto o servicio de acuerdo con las preferencias de los consumidores con el fin de acelerar el <a href="#">proceso de compras.</a></strong>
De esta manera se podrá crear un intercambio entre las empresas y consumidores que satisfaga los objetivos de ambas partes.<br>
<br><a href="#">Philip Kotler</a>, el gurú del marketing, dice que la mercadotecnia es:
<div class="frase">
<p>“El proceso social y administrativo por el cual los grupos e individuos<br>
satisfacen sus necesidades al crear e intercambiar bienes
y servicios”</p>
</div><br>
Según la <a href="#">Asociación Americana de Marketing</a> (AMA, por sus siglas en inglés)<br>
<br>
<div class="frase-lg">
<p>“la actividad, el conjunto de instituciones y los procesos para crear,
comunicar, entregar e intercambiar ofertas que tienen valor para los
clientes, clientes, socios y la sociedad en general.”
</p>
</div><br>
Por su parte, William J. Stanton dice que la mercadotecnia se refiere:<br>
<br><div class="frase">
<p>“al desarrollo de las actividades del negocio que dirigen el flujo de
mercancías y servicios del productor hacia el consumidor o usuario.”</p>
</div><br>
Finalmente, Martin L. Bed conceptualiza la mercadotecnia como aquellas “actividades integradas de una empresa, dirigidas hacia la satisfacción de las necesidades
de los clientes con un margen de utilidad.”
<br>En resumen, la mercadotecnia implica la incorporación de una serie de técnicas, estrategias y prácticas cuyo objetivo principal es agregar valor a las diferentes marcas o productos a fin de satisfacer las necesidades de los consumidores.
</p>
</div>
<div class="publicidad">
<div class="publicidad-1">Publicidad</div>
<div class="publicidad-2">Publicidad</div>
</div>
</main>