Why has my border disappeared from around my text?

Question

My border on my website has disappeared, collapsed, and I have no idea why. Please could someone explain the theory as to why this is happening, so that I can understand the process enough to resolve similar issues in future?

The boarder should show around .me p:last-child {

Around the wording ‘Read More’.

CSS

.wrap {
margin: 0px auto;
width: 80%;
margin-top: 10px;
padding: 3em 0em;
position: relative; 
color: #FFF;
}

.me h2 {
margin-top: 2.7em;
font-size: 3.1em;
font-weight: 600;
z-index: 10;
text-align: center;
font-family: sans-serif;
text-transform: uppercase;
vertical-align: baseline;
width: 100%;
height: 100%;
text-align: baseline;
}

.me p {
top: 90%;
font-size: 1.4em;
height: 80px;
font-family: sans-serif;
font-weight: 400;
line-height: 29px;
text-align: center;
margin: 0px auto;
width: 77%;
vertical-align: baseline;
padding: 0px 0px 35px 0px; 
}

.me p:last-child {
display: inline-block;
font-size: 1em;
font-weight: 600;
text-decoration: none;
text-align: center;
border: 10px solid red;
border-radius: 5px;
vertical-align: baseline;
width: 100px;
height: 25px;
padding: 12px 30px;
position: absolute;
top: 85%; 
left: 42.5%; 
}

.image {
background-image: url("http://24.media.tumblr.com/tumblr_lgbgj5Yj5P1qdwr2ro1_500.jpg");
background-size: 110% 100%;
padding: 0px 0px 150px 0px; 
}

HTML

<div class="image">
 <div class="wrap">
  <div class="nav">

     <h1>Resume</h1>
 <ul>
   <li>Home</li>
   <li>Portfolio</li>
   <li>Skills</li>
   <li>Experience</li>
   <li>Contact</li>
 </ul>

  </div>

  <div class="me">
    <h2>Andrew Hardiman</h2>
    <p>Webdesigner & Developer</p>
    <p>Read More</p>
  <span></span>
  </div>

   </div>
   </div>

Answer 1

Because the p element is not really the last-child but the penultimate element within the div.me element. Remove the last span element or add a class to the p tag with the "Read More" text in it.

See Demo and learn more about the :last-child pseudo-selector.