title: Text Selection highlighting expanding to the whole div's width (CSS)
body: <p>I am working on a website but when I select (highlight) the text paragraphs, the selection expands to the whole section width. How do I avoid this?</p>
  
  <p>This is the HTML code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.intro-project {
    font: 140%/1.5;
    width: 100vw;
    height: auto;
    margin: 0 auto;
    padding-top: 5%;
    color: rgba(29, 29, 27, 1)
  }
  
  .intro-project p {
    width: 55%;
    margin: 0 auto
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;div class="intro-project"&gt;
      &lt;p&gt;
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
        ea commodo consequat.
      &lt;/p&gt;
      &lt;ul&gt;
        &lt;li&gt;Lorem Ipsum&lt;/li&gt;
        &lt;li&gt;Lorem Ipsum&lt;/li&gt;
        &lt;li&gt;Lorem Ipsum&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And this is how it looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/OCckq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OCckq.png" alt="enter image description here"></a></p>