title: Make a div a square in CSS
body: <p>How do I make those box divs look like a little box or a square? I set <code>#header</code> width and height and on those it doesn't work.</p>
  
  <pre><code>    &lt;!DOCTYPE HTML&gt;
  &lt;html lang="en"&gt; 
      &lt;head&gt;
          &lt;title&gt;A Page&lt;/title&gt;
          &lt;link type="text/css" rel="stylesheet" href="css/main.css" /&gt;
          &lt;!-- GOOGLE FONTS --&gt;
              &lt;link href="https://fonts.googleapis.com/css?family=Prompt" rel="stylesheet" /&gt;
  
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="header"&gt;
              &lt;div id="search"&gt;
                  &lt;form&gt;
                      &lt;div id="box" class="text"&gt;
                          &lt;input type="text" placeholder="Search" /&gt;
                      &lt;/div&gt;
                      &lt;div id="box" class="small"&gt;
                          &lt;input type="image" src="" alt="submit" /&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
  
              &lt;div id="menu"&gt;
                  &lt;a href=""&gt;&lt;div id="box" class="big"&gt;&lt;/div&gt;&lt;/a&gt;
                  &lt;a&gt;&lt;div id="box" class="small"&gt;&lt;img&gt;&lt;/img&gt;&lt;/div&gt;&lt;/a&gt;
                  &lt;a&gt;&lt;div id="box" class="small"&gt;&lt;img&gt;&lt;/img&gt;&lt;/div&gt;&lt;/a&gt;
                  &lt;span id="notifications"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;br /&gt;
  
          &lt;div id="box" class="big"&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> body{
      font-family: 'Prompt', sans-serif;
      background: #707070;
  }
  
  #header{
      background: #e2ecf2;
      opacity: 0.87;
      border-radius: 30px;
      height: 60px;
      width: 1000px;
      position: fixed;
      left: 50%;
      top: 25px;
      transform: translateX(-50%);
  }
  
  #box{
      outline: 3px;
      outline-style: solid;
      outline-color: #d7d7d7;
  }
  
  #box .small{
      width: 35px;
      height: 35px;
  }
  
  #box .big{
      width: 50px;
      height: 50px;
  }
  
  #header #search{
      margin-left: 37px;
  }
  
  #header #search input{
      float: left;
      margin-left: 20px;
  }
  </code></pre>