title: My image doesn't get centered horizontally and it also overflows the container of bootstrap
body: <p>As far as I know, the Bootstrap class container sets the width of the content to max 1140px.</p>
  <p>Here's how my page is looking:
  <a href="https://i.stack.imgur.com/WNPoq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WNPoq.png" alt="photo" /></a></p>
  <p>the left-sided menu is placed properly (in my mind it makes sense to position it using position: absolute if the whole website will have 1140px width) but the other content should not overflow this 1140px container.</p>
  <p>Now I want to place that image just above the text and I'm not able to do it. (tried it with margin-left: auto + margin-right: auto + display:block / text-align: center)</p>
  <p>Here's the snippet:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var enunt = document.querySelector(".enunt");
  var rezolvare = document.querySelector(".rezolvare");
  var explicatie = document.querySelector(".explicatie");
  var complexitate = document.querySelector(".complexitate");
  var executie = document.querySelector(".executie");
  
  var enuntText = document.querySelector(".enunt-BST");
  var rezolvareText = document.querySelector(".rezolvare-BST");
  var explicatieText = document.querySelector(".explicare-BST");
  var complexitateText = document.querySelector(".complexitate-BST");
  var executieText = document.querySelector(".executie-BST");
  
  enunt.addEventListener("click", function() {
      enuntText.style.display = "block";
      rezolvareText.style.display = "none";
      explicatieText.style.display = "none";
      complexitateText.style.display = "none";
      executieText.style.display = "none";
  });
  
  rezolvare.addEventListener("click", function() {
      enuntText.style.display = "none";
      rezolvareText.style.display = "block";
      explicatieText.style.display = "none";
      complexitateText.style.display = "none";
      executieText.style.display = "none";
  });
  
  explicatie.addEventListener("click", function() {
      enuntText.style.display = "none";
      rezolvareText.style.display = "none";
      explicatieText.style.display = "block";
      complexitateText.style.display = "none";
      executieText.style.display = "none";
  });
  
  complexitate.addEventListener("click", function() {
      enuntText.style.display = "none";
      rezolvareText.style.display = "none";
      explicatieText.style.display = "none";
      complexitateText.style.display = "block";
      executieText.style.display = "none";
  });
  
  executie.addEventListener("click", function() {
      enuntText.style.display = "none";
      rezolvareText.style.display = "none";
      explicatieText.style.display = "none";
      complexitateText.style.display = "none";
      executieText.style.display = "block";
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup,
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video, button {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section {
      display: block;
  }
  body {
      line-height: 1;
  }
  ol, ul {
      list-style: none;
  }
  blockquote, q {
      quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
      content: '';
      content: none;
  }
  table {
      border-collapse: collapse;
      border-spacing: 0;
  }
  
  html {
      font-family: 'Proxima Nova';
      font-weight: 200;
      font-size: 10px;
      max-height: 100%;
      background-color: #00000f;
  }
  
  body {
      width: 100%;
      color: #fff;
      text-rendering: optimizeLegibility;
      font-family: "Proxima Nova" !important;
      font-size: 10px;
      overflow-x: hidden;
      background-color: #00000f !important;
  }
  
  .navbar-custom {
      position: relative;
  }
  
  .abs-center-x {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
  }
  
  .bg-transparent {
      background-color: transparent !important;
  }
  
  .nav-color {
      color :#fff !important;
      font-size: 15px;
      font-weight: bold;
      margin: 5px;
  }
  
  .nav-color:hover {
      color: #77dff1 !important;
  }
  
  .nav-active {
      color: #77dff1 !important;
  }
  
  .display-custom {
      text-transform: uppercase;
      color: #77dff1;
      font-size: 17.5rem !important;
      text-align: center;
  }
  
  .lead-custom {
      font-size: 2.4rem;
      text-align: center;
      margin: 0 auto;
      max-width: 710px;
      line-height: 35px;
      color: #eeede7 !important;
  }
  
  /*Continut centru*/
  
  #central {
      font-family: 'Proxima Nova', sans-serif;
      display: table;
      width: 70%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  
  #intro-wrap {
      display: table-cell;
      vertical-align: middle;
      max-width: 710px;
      width: 100%;
  }
  
  #intro {
      text-transform: uppercase;
      color: #77dff1 !important;
      font-size: 17.5rem;
      text-align: center;
  }
  
  .intro {
      font-size: 2.4rem;
      text-align: center;
      margin: 0 auto;
      max-width: 710px;
      line-height: 35px;
      color: #eeede7 !important;
  }
  
  #hr {
      position: absolute;
      top: 90%;
      width: 100%;
      margin: 0 auto;
  }
  
  hr {
      border-color: #77dff1 !important;
      max-width: 90%;
  }
  
  
  .button-wrap {
      postion: absolute;
      text-align: center;
      margin-top: 2.5rem;
  }
  
  .button-custom {
      font-family: 'Proxima Nova';
      font-weight: 600;
      background-color: transparent;
      text-align: center;
      text-decoration: none;
      font-size: 2.5rem;
      color: #fff;
      cursor: pointer;
      border: 2px solid #77dff1;
      padding: 15px;
      margin: 0 auto;
  }
  
  .button-custom:hover {
      font-weight: 100;
      color: #00000f;
      background: #77dff1;
  }
  
  /* probleme DEI */
  
  .list-item-custom {
      text-align: center;
      border: 1px solid #77dff1;
      color: #77dff1;
      padding: 2rem 4rem;
      margin-bottom: 0.7rem;
      font-weight: bold;
      font-size: 1.25rem;
      cursor: pointer;
  }
  
  .list-item-custom:hover {
      background-color: #77dff1;
      color: #fff;
  }
  
  .col-sm-6 {
      text-align: center;
      border: 1px solid #77dff1;
      color: #77dff1;
      padding: 2rem;
      font-weight: bold;
      font-size: 1.25rem;
      cursor: pointer;
  }
  
  .col-hover:hover {
      font-weight: 100;
      color: #fff;
      background: #77dff1;
  }
  
  .col-custom {
      color: #fff;
      text-align: center;
      font-size: 1.75rem;
      font-weight: bold;
  }
  
  .pre-scrollable {
      max-height: 700px !important;
      border: 1px solid #77dff1;
  }
  
  .lista-pasi-executie {
      list-style: decimal;
  }
  
  .fontawesome-custom {
      position: absolute;
      top: 15%;
      left: 50%;
      transform: translateX(-50%);
      color: #77dff1;
      font-size: 20rem;
  }
  
  .autor-color {
      color: #77dff1;
      font-weight: bold;
  }
  
  .explicatie-rezolvare {
      color: #77dff1;
      font-weight: bold;
  }
  
  .lista-observatii {
      list-style: disc;
  }
  
  .lista-pasi-executie &gt; li {
      margin-left: 2rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Divide et Impera&lt;/title&gt;
      &lt;link href="../css/normalize.css" rel="stylesheet" /&gt;
      &lt;link href="../css/fonts.min.css" rel="stylesheet" /&gt;
      &lt;link href="../css/main.css" rel="stylesheet" /&gt;
      &lt;link href="../css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;script src="https://kit.fontawesome.com/6612084f00.js" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;nav class="navbar navbar-expand-lg navbar-light bg-transparent"&gt;
              &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"&gt;
                &lt;span class="navbar-toggler-icon" style="color: #fff !important"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup"&gt;
                &lt;div class="navbar-nav"&gt;
                  &lt;a class="nav-link nav-color" href="#"&gt;Home&lt;/a&gt;
                  &lt;a class="nav-link nav-color" href="#"&gt;Introducere DEI&lt;/a&gt;
                  &lt;a class="nav-link nav-color" href="#"&gt;DEI Iterativ&lt;/a&gt;
                  &lt;a class="nav-link nav-color nav-active" href="#"&gt;Probleme DEI&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/nav&gt;
            &lt;div style="position: absolute; top: 50%; left: 1%; transform:translateY(-50%);"&gt;
                  &lt;ul class="list-group"&gt;
                      &lt;li class="list-group-flush list-item-custom enunt"&gt;Enunt&lt;/li&gt;
                      &lt;li class="list-group-flush list-item-custom rezolvare"&gt;Rezolvare + cod&lt;/li&gt;
                      &lt;li class="list-group-flush list-item-custom explicatie"&gt;Explicatie rezolvare&lt;/li&gt;
                      &lt;li class="list-group-flush list-item-custom complexitate"&gt;Complexitate&lt;/li&gt;
                      &lt;li class="list-group-flush list-item-custom executie"&gt;Executie&lt;/li&gt;
                    &lt;/ul&gt;
            &lt;/div&gt;
                &lt;div class="enunt-BST"&gt;
                  &lt;div class="row"&gt;
                    &lt;div class="col-xs-12 col-custom"&gt;
                      &lt;i class="fas fa-clipboard fontawesome-custom"&gt;&lt;/i&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div id="central"&gt;
                    &lt;div class="col-custom"&gt;
                      &lt;h1 class="display-3"&gt;Autor: &lt;span class="autor-color"&gt;Mihai Vasile&lt;/span&gt;&lt;/h1&gt;
                    &lt;/div&gt;
                        &lt;div class="col-custom"&gt;
                              Sa se demonstreze daca un arbore binar este de tipul BST (binary search tree)
                              &lt;div class="observatie-BST"&gt;
                                &lt;span style="font-weight: bold; color: #77dff1;"&gt;Observatie &lt;/span&gt;- un BST are urmatoarele proprietati:
                              &lt;/div&gt;
                              &lt;ul class="lista-observatii"&gt;
                                &lt;li&gt;Orice subarbore din partea stanga al unui nod contine valori mai mici decat nodul “tata”&lt;/li&gt;
                                &lt;li&gt;Orice subarbore din partea dreapta al unui nod contine valori mai mari decat nodul “tata”&lt;/li&gt;
                                &lt;li&gt;Atat subarborele drept, cat si cel stang trebuie sa fie la randul lor BST&lt;/li&gt;
                              &lt;/ul&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="rezolvare-BST" style="display: none; color: #fff;"&gt;
                  &lt;div id="central"&gt;
                      &lt;div class="col-custom"&gt;
                            &lt;pre class="pre-scrollable" style="color: #fff; text-align: justify;"&gt;
                          #include "iostream"
  
                          using namespace std;
                          
                          //Un nod al unui arbore binar are drept componente id-ul sau,
                          //cat si pointeri catre "copilul" drept si cel stang.
                          
                          class node
                          {
                          public:
                              int data;
                              node* left;
                              node* right;
                          
                              // Allocam noului nod id-ul sau 
                              //si initializam pointeri catre stanga si dreapta cu NULL
                              node(int data)
                              {
                                  this-&gt;data = data;
                                  this-&gt;left = NULL;
                                  this-&gt;right = NULL;
                              }
                          };
                          
                          int isBSTUtil(node* node, int min, int max);
                          
                          /* Functia principala ce verifica daca arborele binar
                          este de tip BST sau nu, utilizand o functie secundara numita
                          isBSTUtil */
                          int isBST(node* node)
                          {
                              return(isBSTUtil(node, INT_MIN, INT_MAX));
                          }
                          /* Intoarce adevarat daca arborele dat este de tip BST si
                          se respecta conditiile impuse in cerinta: 
                          id-ul sa fie &gt;=min si &lt;=max 
                          */
                          int isBSTUtil(node* node, int min, int max)
                          {
                              /* un nod NULL este de tip BST */
                              if (node == NULL)
                                  return 1;
                          
                              /* fals daca id-ul nodului nu este cuprins intre min si max */
                              if (node-&gt;data &lt; min || node-&gt;data &gt; max)
                                  return 0;
                          
                              /* Daca nodul curent respecta conditia BST, se verifica recursiv subarbori acestuia,
                              modificand corespunzator min si max */
                              return
                                  isBSTUtil(node-&gt;left, min, node-&gt;data - 1) &amp;&amp; // Id-urile nu trebuie sa se repete  
                                  isBSTUtil(node-&gt;right, node-&gt;data + 1, max); // Id-urile nu trebuie sa se repete
                          }
                          
                          
                          int main()
                          {
                              node* root = new node(4);
                              root-&gt;left = new node(2);
                              root-&gt;right = new node(5);
                              root-&gt;left-&gt;left = new node(1);
                              root-&gt;left-&gt;right = new node(3);
                          
                              if (isBST(root))
                                  cout &lt;&lt; "Este BST";
                              else
                                  cout &lt;&lt; "Nu este BST";
                          
                              return 0;
                          }
                            &lt;/pre&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="explicare-BST" style="display: none; color: #fff;"&gt;
                &lt;div class="row"&gt;
                  &lt;div class="col-xs-12 col-custom"&gt;
                    &lt;i class="far fa-lightbulb fontawesome-custom"&gt;&lt;/i&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div id="central"&gt;
                  &lt;div class="row"&gt;
                    &lt;div class="col-custom" style="text-align: left;"&gt;
                      &lt;span class="explicatie-rezolvare"&gt;Explicatie rezolvare:&lt;/span&gt;  
      Problema are la baza verificarea daca id-urile unice ale unor noduri dintr-un arbore respecta conditiile specifice unui arbore BST.
      Incepem prin a ne declara arborele, acesta fiind o clasa ce contine: id-ul, cat si pointeri catre „fii” (subarborii) sai: stang si drept.
      Se apeleaza functia ce verifica daca arborele este BST sau nu, aceasta efectuand urmatoarele operatii:
      &lt;ol class="lista-pasi-executie"&gt;
        &lt;li&gt;Se seteaza initial limitele intre care trebuie sa se situeze nodurile min si max drept limitele tipului de data INT&lt;/li&gt;
        &lt;li&gt;Verifica daca nodul dat este NULL, caz in care returnaza adevarat (un nod gol este de tip BST deoarece nu influenteaza min si max si nu are un id asociat)&lt;/li&gt;
        &lt;li&gt;Se verifica daca id-ul nodului este cuprins in intervalul [min,max].&lt;/li&gt;
        &lt;li&gt;In caz negativ, functia returneaza 0;&lt;/li&gt;
        &lt;li&gt;In caz afirmativ, se apeleaza recursiv functia mai intai pe partea stanga a arborelui, dupa care pe partea dreapta, modificand min si max corespunzator directiei in care o luam&lt;/li&gt;
      &lt;/ol&gt;  
                      &lt;/div&gt;
                  &lt;/div&gt;   
              &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="complexitate-BST" style="display: none; color: #fff;"&gt;
                &lt;div class="row"&gt;
                  &lt;div class="col-xs-4 col-custom"&gt;
                    &lt;img src="https://imgur.com/a/6lS74SW" style="text-align: center;"&gt;&lt;br&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div id="central"&gt;              
                  &lt;div class="col-custom"&gt;
                          Complexitate: O(n) &lt;br&gt;
                          Demonstratie complexitate: &lt;br&gt;
                          Algoritmul prezentat mai sus verifica daca id-ul nodului curent se afla in intervalul [min,max]. In caz afirmativ, acesta se autoapeleaza si continua aceasta verificare a id-ului mai intai in subarborii stangi, dupa care cei drepti.
                          Astfel, pentru un arbore de marime n, sunt parcurse in mod recursiv toate cele n noduri, ceea ce da programului o complexitate medie de O(n).
                  &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="executie-BST" style="display: none;"&gt;
                
            &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;script src="../js/main.js"&gt;&lt;/script&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>How can I place that image just above the text? (click on &quot;Complexitate&quot; in the menu to see what the text &amp; image)</p>