How can I float this Nav bar to the left?

Question

I need to know how to move the links in the nav-bar to the left. Not the text, but all of the links themselves. For the life of me, I can't get it right. Also, I need to know if there is a way to create a box shadow only to the left and right of a div. I'll upload my JSFiddle at the bottom, but as of right now here is my css and my html

.sidebar1 a:link{
    background-color:  #c1c1a4;
    border-radius: 15px;
    border:1px solid white;
    display: block;
    background-size: 15px;
    text-decoration: none;
    width: 200px;
    padding: 5px 5px 5px 10px;
    margin-bottom: 5px;
    color: darkgreen;
    padding-right: 20px;
    font-family: verdana;
    font-size: .9em;
}

.sidebar1{
    float: left;
    width: 20%;
    padding: 0 20px 0 20px;
    background: url(sidebar1background.jpg);
    background-repeat: repeat-y;
    height: 1000px;

<div class="content">   
<aside class="sidebar1">

    <h4>Best Prime Time Shows</h4>
<ul>
    <li><a href="#">Alice</a></li>
    <li><a href="#">All In The Family</a></li>
    <li><a href="#">Barney Miller</a></li>
    <li><a href="#">Beverly Hillbillies</a></li>
    <li><a href="#">Bewitched</a></li>
    <li><a href="#">The Bob Newhart Show</a></li>
    <li><a href="#">The Brady Bunch</a></li>
    <li><a href="#">Gilligan's Island</a></li>
    <li><a href="#">Good Times</a></li>
    <li><a href="#">The Love Boat</a></li>
    <li><a href="#">Mary Tyler Moore</a></li>
    <li><a href="#">M*A*S*H</a></li>
    <li><a href="#">Maude</a></li>
    <li><a href="#">One Day At A Time</a></li>
    <li><a href="#">Petticoat Junction</a></li>
    <li><a href="#">Soap</a></li>
    <li><a href="#">Taxi</a></li>
    <li><a href="#">What's Happening</a></li>
    <li><a href="#">Welcome Back Kotter</a></li>
    <li><a href="#">WKRP In Cincinatti</a></li>
</ul>

            </aside>

And here is the jsfiddle: https://jsfiddle.net/b6jh396e/#&togetherjs=iIHt8Oayte

Answer 1

Your fiddle code was a bit confused, so I made a new very simple one with the macro sections you are looking for.

You can find it here: http://jsfiddle.net/xL1o0Lrp/3/

You have to be careful with positioning and floating of the elements.

In my fiddle there is a main container which takes up the 90% of the viewport width:

.main-container{
  height:100vh;
  width:90%;
  margin:0 auto;
  background:#ccc;
}

Inside the main container you can see 2 sections:

1. The aside section which contains the left-aligned navigation links:

2. The content section with the text

   aside{
     float:left;
     width:35%;
   }
   
   section{
     float:left;
     width:65%;
     background:#ddd;
   }
   

Notice that the width percentage is based on the parent container width - in this case the .main-container and both are floating to left in order to be next to each other.

For the box-shadow on the left and on the right I used the box-shadow rule like this:

  /* shadow on all the 4 sides*/
  box-shadow: 0 0 10px rgba(0,0,0,.25);

  /* or if you want the shadow only on sides */
  box-shadow: 10px 0 10px -5px rgba(0,0,0,.25) , -10px 0 10px -5px rgba(0,0,0,.25); 

Hope that helps.

Answer 2

This is how you can have the shadow only on the sides (example) :

<div>This is a div element with a box-shadow</div>

div { 
  width: 200px; 
  height: 100px; 
  box-shadow: 6px 0 4px -4px #222 , -6px 0 4px -4px #222; 
}

https://jsfiddle.net/r1sf3hnv/