title: Prevent css from changing elements width
body: <p>they look normal when i have my windows on full mode(see picture) <a href="https://i.stack.imgur.com/yMOAa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yMOAa.png" alt="enter image description here"></a></p>
  
  <p>But when its on a smaller screen:
  <a href="https://i.stack.imgur.com/JIRiy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JIRiy.png" alt="enter image description here"></a></p>
  
  <p>It becomes long shaped. I just want it to stay a square and not change form.</p>
  
  <p>My html and css:</p>
  
  <pre><code>&lt;div id="logo"&gt;
  &lt;img src="http://i.cubeupload.com/jmdKlW.png"/&gt;
  &lt;/div&gt;
  &lt;div id="title"&gt;
  &lt;h3&gt;Who's watching&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="divOuter"&gt;
   &lt;div class="divInner1"&gt;First DIV&lt;/div&gt;
   &lt;div class="divInner2"&gt;Second DIV&lt;/div&gt;
   &lt;div class="divInner3"&gt;Third DIV&lt;/div&gt;
   &lt;div class="divInner4"&gt;Third DIV&lt;/div&gt;
  
  &lt;/div&gt;
  &lt;div class="divOuter"&gt;
   &lt;div class="divInner5"&gt;Desseh&lt;/div&gt;
   &lt;div class="divInner6"&gt;Anna&lt;/div&gt;
   &lt;div class="divInner7"&gt;Sia&lt;/div&gt;
   &lt;div class="divInner8"&gt;Lucas&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.divOuter {
    width: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .divInner1,
  .divInner2,
  .divInner3,
  .divInner4  {
    border: .3em solid rgba(0,0,0,.4);
    width: 150px;
    height: auto;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 50px;
    text-align: center;
    display: inline-block;
    flex:1;}
  
  .divInner1  {
    background:grey;
  }
  .divInner2  {
    background:grey;
  }
  .divInner3  {
    background:grey;
  }
  .divInner4  {
    background:grey;
  }
  
    .divInner1:hover  {
    border: .3em solid white;
  }
    .divInner2:hover  {
    border: .3em solid white;
  }
    .divInner3:hover  {
    border: .3em solid white;
  }
    .divInner4:hover  {
    border: .3em solid white;
  }
  
  
  .divInner5,
  .divInner6,
  .divInner7,
  .divInner8  {
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 20px;
    text-align: center;
    display: inline-block;
    flex:1;
    color:grey;
    font-size: 24px;
  </code></pre>
  
  <p>A working example can be found at xat.me/madses1996?
  I think this has something to do with the fact that im using flex to center things. Is there a way to have it like this but when i shrink my browser it stays square shaped?</p>
  
  <p>I cant seem to edit the boxes individually</p>