Cómo hacer que las viñetas de lista queden dentro del borde con CSS

[Lincejay]

Hola betas.
Tengo un problema que no puedo resolver.
Quiero añadir en un bloque dos columnas y agregarle un borde con css pero las viñetas de la lista queda por fuera del borde.
Queda así:

He intentado varias cosas pero no se casí nada de css.
Alguien sabe como puedo hacer para que queden dentro del borde?

 

[Mentito]

Haciendo uso de flexbox puedes mejorarlo.

Esto en el html:

<div class="flex-container">
<div class="flex-item">
<ul>
<li>Lista 1</li>
<li>Lista 2</li>
<li>Lista 3</li>
</ul>
</div>
<div class="flex-item">
<ul>
<li>Lista 4</li>
<li>Lista 5</li>
<li>Lista 6</li>
</ul>
</div>

Coloca esto en el css.

/**Estilo listas CSS**/
.flex-container{
  display: flex;
  border: 1px solid #bbb;
  justify-content: space-around;
  align-items: center;
}

/**Para adaptar listas a dispositivos móviles**/
@media screen and (max-width:500px){
  .flex-container{
    display: flex;
    flex-direction: column;
  }

 

[Jxit3]

con css grid lo logras

 

[Lincejay]

con css grid lo logras

Al final lo arregle con css.
Le di una clase css al bloque y después le di padding al elemento, no se si sea la forma correcta pero así lo resolví.

 

[Jxit3]

Al final lo arregle con css.
Le di una clase css al bloque y después le di padding al elemento, no se si sea la forma correcta pero así lo resolví.

si eso es valido también, pero css grid te sacara de apuros en el futuro, es re fácil aprenderlo

 

[Lincejay]

si eso es valido también, pero css grid te sacara de apuros en el futuro, es re fácil aprenderlo

Gracias por el consejo.