Creating Login/Register on Header

To reposition items, you need to start with:

.selector {
position: relative;
top: 0px;
left: 0%;
}

and then make adjustments. Use ‘-‘ to move up or left from start-position so
top: -1px moves up, 1px moves down
left: -1% moves left, 1% moves right
For width dimensions, using % ensures your responsiveness is maintained.

So you need to add to your current styling:

.my-extra-widget {
  background-color: #CCCCCC;
  color: #777777;
  float: right;
  font-size: 10px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
  position: relative;
  top:  -320px;
}