Li a 100% width of screen

HTML & CSS
1

So, I’m trying to get these links to go to 100% of the screen when mobile, but for some reason display:block and width:100% is not working. This should be quite simple, but something is stumping me.

“Why Choose Recovery Network?” is the first of the 4 links. HELP! :smiley:

http://rpn.epicsrv.com/

        <section id="Private_Helplines">


        <article id="Private">

        <h2> Private Helplines </h2>


        <h3> Quisque bibendum bibendum enim. </h3>


        <p> Quisque bibendum bibendum enim, in suscipit nulla commodo eu.
        Quisque suscipit libero enim, et vestibulum lorem. Cras sed dui nunc.
        Proin faucibus rutrum dolor, id sollicitudin nunc elementum sed.
        Curabitur faucibus rhoncus venenatis.
        Etiam eu nisi sed sem feugiat tincidunt sed at neque.
        </p>










        </article><!--#Private-->



        <ul>


        	<li ><a class="Column1" href="#"> Why Choose Recovery Placement Network? </a> </li>
            <li ><a class="OtherColumns" href="#"> Insurance Accepted </a> </li>
            <li ><a class="OtherColumns" href="#"> Free Assessment </a> </li>
            <li ><a class="OtherColumns" href="#"> Private Helplines </a> </li>




        </ul>






        </section><!--#PrivateHelplines-->

#Private_Helplines > ul li a {
text-decoration: none;
color: #FFF;
padding: 2.5em 1em;
display: block;
margin: 0 auto;
font-stylhe: italic;
font-size: 1.875em;
font-family: ‘Crimson Text’ !important;
border-right: thin solid #FFF;
}

2

Try this:



<ul style="background-color:#9ff">
  <li style="background-color:#f9f;"><a class="Column1" href="#"> Why Choose Recovery Placement Network? </a> </li>
  <li style="background-color:#fc9; margin:0;"><a class="OtherColumns" href="#"> Insurance Accepted </a> </li>
  <li style="background-color:#f00; padding:0;"><a class="OtherColumns" href="#"> Free Assessment </a> </li>
  <li style="background-color:#cfc; margin:0; padding:0;"><a class="OtherColumns" href="#"> Free Assessment </a> </li>
</ul>


<ul style="background-color:#f9f; margin:0; padding:0;">
  <li style="background-color:#f9f;"><a class="Column1" href="#"> Why Choose Recovery Placement Network? </a> </li>
  <li style="background-color:#fc9; margin:0;"><a class="OtherColumns" href="#"> Insurance Accepted </a> </li>
  <li style="background-color:#f00; padding:0;"><a class="OtherColumns" href="#"> Free Assessment </a> </li>
  <li style="background-color:#cfc; margin:0; padding:0;"><a class="OtherColumns" href="#"> Free Assessment </a> </li>
</ul>
3

Two things you need to do in your media query:

  1. you need to override the display: flex from the UL, seen on line 506, and

  2. you need to override the :first-child styles seen on line 521

4