<div class="sidebar">
  <div class="container-fluid">
      <ul class="nav navbar-nav">
        <div class="row full">
          <div class="col-md-12 text-center">
            <li class="navlist"><a href="#anchor-title" rel="nofollow">About Me</a></li> 
          </div>
        </div>
        <div class="row full">
          <div class="col-md-12 text-center">
            <li class="navlist"><a href="#portfolio-anchor" rel="nofollow">Portfolio</a></li> 
          </div>
        </div>
        <div class="row full">
          <div class="col-md-12 text-center">
            <li class="navlist"><a href="#contactme-anchor" rel="nofollow">Contact Me</a></li>
          </div>
        </div>
      </ul>
  </div>
</div>
<div class="content">
    <div class="info" >
      <div class="row text-center title" id="anchor-title">
        <div class="col-md-10 text-center" id="title-bar">
          <h1> <u> Christopher Kottmyer </u> </h1>
            <h3> Web Design </h3>
            <a href="https://www.facebook.com/Silber8806"><i class="fa fa-facebook-square"></i></a>
            <a href="https://www.linkedin.com/in/chris-kottmyer-77117914/"><i class="fa fa-linkedin-square"></i></a>
          <a href="http://christopherkottmyer.com"><i class="fa fa-wordpress"></i></a>
        </div>
      </div>
      <div class="bck">
        <div class="row about-me">
          <div class="col-md-5" id="title-bar">
            <p class="bio-text" valign="middle"> <b> <i> My name is Chris.  I'm doing a project on web design that includes this specific project, which displays some of my projects.  This is the second project that I'm doing. </b> </i>
            </p>
          </div>
          <div class="col-md-7">
            <img src="https://chriskottmyerblog.files.wordpress.com/2015/10/me.jpg?w=225" class="img-responsive img-circle">
          </div>
        </div>
        <div class="row text-center portfolio" id="portfolio-anchor">
          <div class="col-md-10 text-center">
              <h1> Portfolio </h1>
          </div>
        </div>
        <div class="portfolio-images">
          <div class="row">
            <div class="col-md-5"><img src="http://goo.gl/vyAs27" align="right" class="img-fluid pimage rimage"/></div>
            <div class="col-md-5"><img src="http://goo.gl/vyAs27" align="left" class="img-fluid pimage limage"/></div>
          </div>
          <div class="row">
            <div class="col-md-5"><img src="http://goo.gl/vyAs27" align="right" class="img-fluid pimage rimage"/></div>
            <div class="col-md-5"><img src="http://goo.gl/vyAs27" align="left" class="img-fluid pimage limage"/></div>
          </div>
        </div>
        <div class="row text-center contactme" id="contactme-anchor">
          <div class="col-md-10 text-center">
              <h1> Contact Me </h1>
          </div>
        </div>
        <div class="row text-center">
          <div class="col-md-10 text-center contact-form">
            <form>
               <fieldset>
                <legend>Send Message:</legend>
                 <b>Name:</b><br>
                <input type="text" name="name" required><br>
                 <b>E-mail:</b><br>
                <input type="text" name="email" required><br><br>
                  <b>Message:</b><br>
                 <textarea cols=40 rows=5 name="message"></textarea>
                 <br>
                <input class="page-end" type="submit" value="Submit">
                 <br>
              </fieldset>
            </form>
          </div>
        </div>
      </div>
    </div>
</div>

 .sidebar {
     position: fixed;
     width: 200px;
     height: 1000px;
     background: #000;
 }

 .content {
     margin-left: 200px;
     height: 1000px;
     width: auto;
     position: relative;
     background: #DCD8E4;
     overflow: auto;
     z-index: 1;
 }

 .info {
     width: 1440px;
     height: 300px;
     position: relative;
     background: #DCD8E4;
 }

@media (min-width:600px) {
   .sidebar {
     width: 250px;
   }
   .content {
     margin-left: 250px;
   }
 }

.navlist {
    padding-top: 12px;
    padding-bottom: 12px;
}

.navlist a {
  color:white;
  font-family:Book Antiqua;
}

.full {
    border-style: solid;
    border-radius: 10px;
    border-color: grey white;
}

.full:hover { 
    background-color: #562E94;
}

.title {
  background-color: white;
  border-style: solid;
  border-color: grey;
}

#title-bar {
  padding-top:20px;
  margin-bottom:20px;
}

.bio-text {
  padding-top:100px;
  padding-left:40px;
  text-align: center;
  vertical-align: middle;
}

.img-circle {
    margin-top:30px;
    margin-left:125px;
    margin-bottom: 30px;
    border-radius: 50%;
    border-style: solid;
    border-color: grey;
}

.portfolio {
  padding-top: 30px;
  padding-bottom: 30px;
  background-color:white;
  border-style: solid;
  border-color: grey;
}

.contactme {
  padding-top: 30px;
  padding-bottom: 30px;
  background-color:white;
  border-style: solid;
  border-color: grey;
}

.portfolio-images
{
  background-image: url('http://hotemailtemplates.com/templates/Free/wallpapers/1680x1050/Glowing%20Background.jpg');
}

img:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

.pimage {
  margin: 20px 20px 20px 20px;
  border-style: solid;
  border-color: grey;
  height: 300px;
  width: 300px;
}

.contact-form {
  margin: 20px 0px 0px 20px;
}

input {
  margin: 10px 0px 0px 10px;
}

.page-end {
  margin-bottom: 20px;
}