CSS Nav buttons move bottom left -

the nav buttons sit on top of image title div. both drop down on hover. when going next image, nav buttons @ correct location, when click on previous, whole nav screen shifts bottom right!

  nav {          position: absolute;   width: 100%   height: 20px;   padding-bottom: 2px;   z-index: 1;   float: right;   margin-top: -20px;   transition: margin-top 200ms ease-in;   background: black;   opacity: 0.4;   right: 1px;  } .title {   position: absolute;   width: 85%;   height: 20px;   padding-bottom: 2px;   margin-top: -25px;   transition: margin-top 200ms ease-in;   background: black;   color: white;   opacity: 0.6; }  .title-text {   float: left;   padding-left: 5px; }  .slides:hover .title {    margin-top: 0px; } 

here link fiddle.

i fixed part code clumsy

anyway still here example : jsfiddle

first of forgot ";" in .nav { between height , width secondly dont use position: absolute , float exclude each other try connect similiar classes buttons

.btn-prev, .btn-next{   color: black;   background:white;   border: 2px solid white;   margin: 0px 5px 0px 0px;   cursor: pointer;   padding: 0px 5px 0px 5px;   display: inline-block; } 

quick explain, set text-align on .nav element buttons set on right side inside .nav , .btn-* display: inline-block; (default display: block; behave similiar text.