How to make grid item responsive to viewport? - html

Question

I am creating a website that has a header, a sidebar on the left, a main content at the center, where information will be displayed, a right side-bar, and a footer that will contain an image or something. The header and footer were left out of the grid template.
For this question I am focusing only on the following classes: .sidebar(left-sidebar aka a table of content or index), .contenido-carrera(information displayed), and .publicidad(right-sidebar)
All the sections were defined by using this piece of CSS
.carrera-grid {
margin: 120px 12px;
display: inline-grid;
grid-template-columns: 230px fit-content(80ch) 170px;
grid-gap: 10px;
}
You can tell the content in the center is by far the largest. First sidebar will contain a list of elements like "Table of contents" on Wikipedia, and the one with 170px will be kept for publicity.
.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;
}
I tried to set display:flex just on the centered element, .contenido-carrera but this makes a undesired/unwanted layout/design, makes all items to lose their width and space between them while not using the fixed space that was intended on the grid.
.contenido-carrera {
text-align: justify;
display: inline-block;
position: relative;
bottom: 90px;
}
https://streamable.com/b6itn
As you can see, the item on the centered element is affected by an overflow within itself. So how can I make this as responsive as possible? Thought of using media-queries but am currently running bootstrap on this page, so I wouldn't like to get in the way of that.
Like previously mentioned the header and footer were left out of the grid-template.
<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 proceso de compras.</strong>
De esta manera se podrá crear un intercambio entre las empresas y consumidores que satisfaga los objetivos de ambas partes.<br>
<br>Philip Kotler, 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 Asociación Americana de Marketing (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>