Esta solución que te daré no es la mejor, tienes mucha deficiencia en tu código, pero trataré de explicarte un poco, aunque te sugiero que busques un tutorial de Bootstrap y complementes con lo que estás aprendiendo de HTML. Hoy en día HTML y CSS son casi inseparables. Bootstrap te hace la vida más fácil, pero la curva de aprendizaje puede ser muy pronunciada si no sabes lo básico de CSS.
Mi solución a tu problema es la siguiente:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container text-center mb-5">
<div style="width:300px;height:80px; margin-left:auto; margin-right:auto; margin-bottom:5%; border:1px solid #000;">Lays Gourmet, producto mejor situado por su baja sal(1,2g/100g) y grasas(31,7g/100g)</div>
<a><img src="http://images.uncyc.org/commons/thumb/b/bf/LAYS_Sour_Cream_Onion_Potato_Chips.png/180px-LAYS_Sour_Cream_Onion_Potato_Chips.png" style="width:15%; height:15%" ></a>
</div>
<div class="container">
<div class="row">
<div class="col-xs-2 ml-auto mt-auto mb-auto">
<img src="https://regcompliance.files.wordpress.com/2009/08/triangle-button.png" style="width:75%; height:75%">
</div>
<div class="col-xs-6 mr-auto mt-auto mb-auto">
<div class="text-center" style="width:300px;height:80px;border:1px solid #000;">Lays Gourmet, producto mejor situado por su baja sal(1,2g/100g) y grasas(31,7g/100g)
</div>
</div>
</div>
</div>
</body>
Como puedes ver, he insertado dos elementos div
con la clase container
de Bootstrap.
En el primero he agregado la clase text-center
y la clase mb-5
, la primera no te la necesito explicar, pero la segunda es un estilo de Bootstrap que agrega un margen inferior (margin-bottom) de 5 rem
a tu container
. Ya con eso te sacas bastante de tu código 'hard-codeado' que tenías.
En cuanto al contenido del primer container
lo he dejado exactamente igual, excepto que he quitado algunos estilos redundantes, ya que los que apliqué en el parent son suficientes.
El segundo container
es el que te interesa. No te explicaré a fondo todo lo que hay allí, pero si te diré que debes tratar de separar tus estilos de tu código HTML, para eso se usan las hojas de estilo, conocidas como CSS.
Lo que hice en el segundo container
fue lo siguiente: Agregué un div
y le apliqué un estilo row
de Bootstrap. Lo hice para poder usar los estilos col
. Ya que según la documentación de Bootstrap los elementos tipo col
se usan dentro de contenedores tipo row
.
Como te imaginarás un elemento row
es un elemento que se comporta parecido a la fila de una tabla, por lo tanto los elementos col
quedarán alineados en una misma fila. Con eso ya tienes tu imagen y tu cuadro en la misma fila.
Luego, a cada elemento col
le apliqué estilos de Bootstrap para establecer los márgenes, y con eso el comportamiento deseado.
El primer elemento col
tiene un estilo de ml-auto
que indica que el margen a su izquierda será automático, en cierta manera es como si empujara el elemento hacia la derecha hasta que consiga algo que lo frene. Luego le apliqué los estilos mt-auto
y mb-auto
, así el objeto que se encuentra dentro de col
queda centrado verticalmente.
El segundo elemento col
tiene un estilo muy parecido al primero, excepto que le aplico mr-auto
, así el objeto que está dentro de col
es empujado esta vez hacia la izquierda. La magia de todo esto es que ambos elementos col
quedan perfectamente centrados horizontalmente.
Espero que esto te sirva como solución.
Nota: Las imágenes usadas tienen licencia de libre uso y distribución.