negative space above sidebar

Hi there,

My website is courtneybruettephotography.com.

There is a great amount of negative space above my sidebar and depending on what post you visit, the negative space is rather large.

I would really like to get that right sidebar’s content to stay locked in position near the top of the page where the post’s content begins and for it to stay there no matter the page.

The coding is #rightbar not #sidebar (not sure if that matters or not) but as I have tried reading and copying the CSS provided from these two sites:
http://css-tricks.com/scrollfollow-sidebar/

http://stackoverflow.com/questions/19486944/how-do-i-lock-a-sidebar-to-the-height-of-a-window-even-when-a-user-scrolls

but when I enter the “position:fixed” or “position:absolute” to the side/rightbar’s CSS it puts it way down at the bottom of the page in the CENTER of the screen.

I don’t know why it is going from the right to the center with the word “fixed” or “absolute.”

I also tried adding height:100%; but that did not work either.

This is what the current coding looks like:

/* Right Sidebar*/

#rightbar {
width: 22%;
float: right;
margin-left: 0px;
font-size: 22px;
}

#rightbar .widgets {
width: 85%;
padding: 7%;
border: solid 1px #ffffff;
margin-bottom: 0px;
float: right;
clear: left;
}

#rightbar h2 {
font-weight: 400;
font-size: 48px;
font-family: Sacramento;
color: #009ACD;
margin-top: 0;
margin-bottom: 0px;
}

#rightbar ul {
padding: 0;
margin: 0;
width: 100%;
float: left;
clear: left;
}

#rightbar ul li {
padding-top: 0px;
padding-bottom: 0px;
list-style: none;
width: 100%;
margin-top: 0px;
}

#rightbar ul li ul li {
border: none;
list-style: none;
margin-left: 0;
margin-top: 0px;
float: left;
clear: left;
width: 100%;
}

#rightbar ul li a {
border: none;
color: #202020;
background: #ffffff;
text-decoration: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 0 6px;
}

#rightbar ul li a:hover {
text-decoration: none;
color: #009ACD;
}

#rightbar a {
text-decoration: underline;
}

#rightbar a:hover {
border: none;
text-decoration: none;
}

Thank you for your time and help!

It is much appreciated! 🙂

https://wordpress.org/plugins/css/