title: Cant get text to move on HTML page with CSS
body: <p>very new to HTML and CSS. Can't get my text to move under my images. I have 4 images and under them I want to be a paragraph of text. This is probably a dumb question so please excuse my ignorance. I cant get the text to move where I want(and the values in the CSS file, pixel wise, are wrong but I can't even get 3 of them to show up to try and adjust them as its under my navbar or the images?). The images show up, in the correct order and are formatted correctly.</p>
  
  <p>Trying to get to look like this:
  <a href="https://gyazo.com/c3de4fa6832107a8f16300cbacca47f8" rel="nofollow">https://gyazo.com/c3de4fa6832107a8f16300cbacca47f8</a></p>
  
  <p>Thanks in advance</p>
  
  <p>Here is my CSS/HTML files:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.img {
      position: relative;
      float: left;
      width:  250px;
      height: 250px;
      background-position: 50% 50%;
      background-repeat:   no-repeat;
      background-size:     cover;
      padding-top: 100px;
  }
  
  .text1 {
   position:relative;
   left:100px;
   top:400px: 
  }
  .text2 {
   position:relative;
   left:200px;
   top:400px: 
  }
  .text3 {
   position:absolute;
   left:300px;
   top:400px: 
  }
  .text4 {
   position:absolute;
   left:400px;
   top:400px: 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;About&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="about.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;a class="navbar-brand" href="index.html"&gt;Title&lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="active"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="links.html"&gt;Links&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;LinkedIn&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Github&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
    
  &lt;div class="container"&gt;
   &lt;img src="images/xxx.jpg" class="img-circle img"&gt;
   
   &lt;img src="images/xxx.jpg" class="img-circle img"&gt;
  
   &lt;img src="images/xxx.jpg" class="img-circle img"&gt;
  
   &lt;img src="images/xx.jpg" class="img-circle img"&gt;
  
  
  
   &lt;div id="text1"&gt;
     &lt;p&gt;TEXT UNDER PIC 1&lt;/p&gt;
   &lt;/div &gt;
      &lt;div id="text1"&gt;
     &lt;p&gt;TEXT UNDER PIC 2&lt;/p&gt;
   &lt;/div &gt;
      &lt;div id="text1"&gt;
     &lt;p&gt;TEXT UNDER PIC 3&lt;/p&gt;
   &lt;/div &gt;
      &lt;div id="text1"&gt;
     &lt;p&gt;TEXT UNDER PIC 4&lt;/p&gt;
   &lt;/div &gt;
  
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>