Grid Display isn't making two columns as it should in CSS-CodePudding

I'm making my first web in HTML and I am trying to put the picture on the left and the text and map on the right while the selector stays on top using grid display. I have tried it on another page of the web and it has worked, but now It stays all in the left column and I can't move anything to the right.

Here's the HTML:

<div id="cuerpores"
<select id="selecto">
            <optgroup id="opcionesselectas">
                <option value="indautxu" data-show=".indautxu">Indautxu</option>
                <option value="deusto" data-show=".deusto">Deusto</option>
                <option value="abando" data-show=".abando">Abando</option>
            </optgroup>
        </select>
        <div class="indautxu zona">
            <img id="imgres" src="imagenes/Paris_k.jpg">
            <p id="txtres"> El Paris kebab, probablemente el mejor Döner Kebab no solo del Barrio de Indautxu, sino que de toda la Gran Bilbao. El antes llamado Indautxu kebab cambió su nombre a mediados de los 10' con tal de destacar entre la competencia, poniendo a la par este humilde local con los grandes Bistros de la capital francesa. Un sitio muy recomendable para grupos de amigos, con un servicio excepcional, cuenta con una oferta irresistible, con gastos mayores a 20€ una botella de dos litros de refresco completamente gratis.</p>
            <div id="mapouter">
                <div class="gmap_canvas">
                    <iframe width="486" height="296" id="gmap_canvas" src="https://maps.google.com/maps?q=paris kebab bilbao&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0">
                    </iframe>
                    <a href="https://putlocker-is.org">putlocker</a>
                    <br>
                    <a href="https://www.embedgooglemap.net">embed google maps wordpress</a>
                </div>
            </div>
        </div>
</div>

And the CSS:

#cuerpores{
    background: #FFFF;
    overflow: hidden;
    padding:  15px;
    width: 80%; 
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-column-gap: 50px;
    grid-row-gap: 50px;
}

#mapouter{
    text-align:right;
    height:296px;
    width:486px;
    margin: 0 auto;
    display: block;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row: 3;
    border: solid;
}   

.gmap_canvas {
    overflow:hidden;
    background:none!important;
    height:296px;width:486px;
}

#imgres{
    max-width: 500;
    max-height: 500;
    margin:  0 auto;
    display: block;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row: 2;
    border: solid;
}

#txtres{
    text-align: justify;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row: 2;
    border: solid;
    font-size: 20px;
    margin: 0 auto;
    display: block;
}

#selecto{
    width: 600px;
    max-height: 30px;
    font-size: 22;
    background-color: #EA4E4E;
    color: #FFFF;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row: 1;
    margin: 0 auto;
    display: block;
    border: solid;

}

#opcionesselectas{
    font-size: 22;
}

CodePudding user response：

You missed adding display: grid to the container element with class .indautxu

#cuerpores {
  background: #FFFF;
  overflow: hidden;
  padding: 15px;
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-column-gap: 50px;
  grid-row-gap: 50px;
}
.indautxu {
  display: grid;
}


#mapouter {
  text-align: right;
  height: 296px;
  width: 486px;
  margin: 0 auto;
  display: block;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 3;
  border: solid;
}

.gmap_canvas {
  overflow: hidden;
  background: none!important;
  height: 296px;
  width: 486px;
}

#imgres {
  max-width: 500;
  max-height: 500;
  margin: 0 auto;
  display: block;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row: 2;
  border: solid;
}

#txtres {
  text-align: justify;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row: 2;
  border: solid;
  font-size: 20px;
  margin: 0 auto;
  display: block;
}

#selecto {
  width: 600px;
  max-height: 30px;
  font-size: 22;
  background-color: #EA4E4E;
  color: #FFFF;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 1;
  margin: 0 auto;
  display: block;
  border: solid;
}

#opcionesselectas {
  font-size: 22;
}

<div id="cuerpores" <select id="selecto">
  <optgroup id="opcionesselectas">
    <option value="indautxu" data-show=".indautxu">Indautxu</option>
    <option value="deusto" data-show=".deusto">Deusto</option>
    <option value="abando" data-show=".abando">Abando</option>
  </optgroup>
  </select>
  <div class="indautxu zona">
    <img id="imgres" src="https://via.placeholder.com/150x350">
    <p id="txtres"> El Paris kebab, probablemente el mejor Döner Kebab no solo del Barrio de Indautxu, sino que de toda la Gran Bilbao. El antes llamado Indautxu kebab cambió su nombre a mediados de los 10' con tal de destacar entre la competencia, poniendo a la par
      este humilde local con los grandes Bistros de la capital francesa. Un sitio muy recomendable para grupos de amigos, con un servicio excepcional, cuenta con una oferta irresistible, con gastos mayores a 20€ una botella de dos litros de refresco completamente
      gratis.</p>
    <div id="mapouter">
      <div class="gmap_canvas">
        <iframe width="486" height="296" id="gmap_canvas" src="https://maps.google.com/maps?q=paris kebab bilbao&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0">
                    </iframe>
        <a href="https://putlocker-is.org">putlocker</a>
        <br>
        <a href="https://www.embedgooglemap.net">embed google maps wordpress</a>
      </div>
    </div>
  </div>
</div>