Full browser width list, but text has max-width

Issue

I have a full browser width list with a background color (which changes color on hover). However I want the li text to be text-align:left, have a max-width and the left and right margins to be equal – but the background color to still be full browser width. How do I do this?

I have made a JSfiddle here.

As soon as I put a max-width on the li, the background color will obviously shrink to the max-width. Is there a way to just target the text within the list?

<div class="case_study_links">
    <ul>
        <li><a href="google.html">Abbey Meadow Flowers<br>Helping to grow a sustainable florists</a></li>
        <li><a href="google.html">Collins Environmental<br>Differentiating ecologists from competitors</a></li>
        <li><a href="google.html">University of Oxford<br>Branding for research project on young migrants</a></li>
        <li><a href="google.html">Small Woods<br>New brand brings credibility to organisation</a></li>
        <li><a href="google.html">Good Energy<br>Rebranding helps double customer numbers</a></li>
    </ul>
</div>

.case_study_links li {
     list-style: none;
     font-size:1.8rem;
     text-align:left;
     border-top:1px solid white;
}

.case_study_links a:link { color:white; display:block; padding:4.8rem 0; background-color:rgb(149,199,201);}
.case_study_links a:visited { color:white; display:block; padding:4.8rem 0; background-color:rgb(149,199,201);}
.case_study_links a:hover { color:white; display:block; padding:4.8rem 0; background-color:rgb(134,179,181);}
.case_study_links a:active { color:white; display:block; padding:4.8rem 0; background-color:rgb(134,179,181);}

Solution

Wrap your text in a <span class="my-text"> and add following CSS properties to it:

.my-text
{
    max-width:100px; /* or anything you want */
    margin:auto
}

Answered By - eylay