title: CSS - Looking to create a box with some text inside. Example inside
body: <p>Here is an example <a href="https://i.stack.imgur.com/X8GAC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X8GAC.png" alt="example."></a></p>
  
  <p>Now, this is my first attempt:</p>
  
  <pre><code>.generated_text {
      display: inline-block;
      width: 50px;
      border: 1px solid #000;
      text-align: center;
      border: 1px;
      position: absolute;
      top: 54%;
      left: 36%;
      margin: -150px 0 0 -150px;
      width:700px;
      height:400px;
  }
  </code></pre>
  
  <p>NOTE: <code>generated_text</code> is a div that outputs text generated from a flask api. </p>
  
  <p>When I ran this, it ends up looking like this:</p>
  
  <p><a href="https://i.stack.imgur.com/iHQOq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iHQOq.png" alt="enter image description here"></a></p>
  
  <p>I'm a complete newbie when it comes to css so any help would be much appreciated. </p>
  
  <p>EDIT: I made some updates but still running into some issues:</p>
  
  <pre><code>.generated_text {
      display: inline-block;
      width: 50px;
      font-family:'Gudea' !important;
      text-align: left;
      color:#000 !important;
      background:#fff !important;
      border: 30px !important;
      border-color: #4b4b4b !important;
      position: absolute;
      top: 54%;
      left: 38.5%;
      margin: -150px 0 0 -150px;
      width:560px;
      height:170px;
  }
  </code></pre>
  
  <p>Which yields:</p>
  
  <p><a href="https://i.stack.imgur.com/WYSV8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WYSV8.png" alt="enter image description here"></a></p>
  
  <p>Any ideas for why the border color isnt showing up?</p>