Остановить выбор, идущий к краю страницы на нескольких строках

При выделении текста для копирования синее выделение проходит по всей странице при выборе каждой строки (как вы можете видеть на изображении ниже).

Как сделать так, чтобы он не пересекал страницу, как на картинке ниже?

Мой код:

HTML:

<div class="maintext">

Welcome/logo

    <div class="headtab">
    About
    </div>

    <p class="info">

   SOME CONTENT

    </p>

  <div class="headtab">
  Requests
  </div>
  <p class="info">
  More content
  </p>

</div>

Затем CSS:

.maintext {
    background-color: #FFF;
    width: 950px;
    align: center;
    padding-top: 50px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-right: 70px;
    padding-left: 70px;
    padding-bottom: 100px;
    display: block;
}
p.info {
    font-family: 'Josefin Slab', serif;
    font-size: 22px;
    color: #000;
    font-weight: 200;
    line-height: 150%;
    word-wrap:break-word;
    display: block;
}
.headtab {
    margin-left: -110px;
    z-index: 20;
    background-color: #FF8100;
    height: 30px;
    width: 120px;
    line-heihgt: 20px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 24px;
    color: #FFF;
    text-decoration: underline; 
    /* The following stopping of text selection is from: http://stackoverflow.com/questions/7018324/how-do-i-stop-highlighting-of-a-div-element-when-double-clicking-on */
-webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}