BamBamm

Screw it, I guess I have to pay someone.

Thanks for letting me know.

I am trying to center my images with a background object.

http://www.appleblossomentertainment.com

What is it I need to do?

#tooplate_middle { 	clear: both;	width: 880px;	height: 240px;	padding: 50px;	overflow: hidden;	background: url(../images/middle.png);}#mid_title { 	font-size: 30px; 	line-height: 38px; 	font-weight: 400; 	color: #fff; 	margin-bottom: 20px;  }@import url(http://fonts.googleapis.com/css?family=Varela+Round);html,body {  background: #333 url("http://codepen.io/images/classy_fabric.png");}.slides {  padding: 0;  width: 609px;  height: 220px;  display: block;  margin: 0 auto;  position: relative;}.slides * {  user-select: none;  -ms-user-select: none;  -moz-user-select: none;  -khtml-user-select: none;  -webkit-user-select: none;  -webkit-touch-callout: none;  }.slides input {  display: none;}.slide-container {  display: block;}.slide {  top: 0;  opacity: 0;  width: 609px;  height: 220px;  display: block;  position: absolute;  transform: scale(0);  transition: all .7s ease-in-out;}.slide img {  width: 100%;  height: 100%;}.nav label {  width: 200px;  height: 100%;  display: none;  position: absolute;  opacity: 0;  z-index: 9;  cursor: pointer;  transition: opacity .2s;  color: #FFF;  font-size: 156pt;  text-align: center;  line-height: 380px;  font-family: "Varela Round", sans-serif;  background-color: rgba(255, 255, 255, .3);  text-shadow: 0px 0px 15px rgb(119, 119, 119);}.slide:hover + .nav label {  opacity: 0.5;}.nav label:hover {  opacity: 1;}.nav .next {  right: 0;}input:checked + .slide-container .slide {  opacity: 1;  transform: scale(1);  transition: opacity 1s ease-in-out;}input:checked + .slide-container .nav label {  display: block;}.nav-dots {  width: 100%;  bottom: 9px;  height: 11px;  display: block;  position: absolute;  text-align: center;}.nav-dots .nav-dot {  top: -5px;  width: 11px;  height: 11px;  margin: 0 4px;  position: relative;  border-radius: 100%;  display: inline-block;  background-color: rgba(0, 0, 0, 0.6);}.nav-dots .nav-dot:hover {  cursor: pointer;  background-color: rgba(0, 0, 0, 0.8);}input#img-1:checked ~ .nav-dots label#img-dot-1,input#img-2:checked ~ .nav-dots label#img-dot-2,input#img-3:checked ~ .nav-dots label#img-dot-3,input#img-4:checked ~ .nav-dots label#img-dot-4,input#img-5:checked ~ .nav-dots label#img-dot-5,input#img-6:checked ~ .nav-dots label#img-dot-6 {  background: rgba(0, 0, 0, 0.8);}#mid_left { 	float:left; 	width:400px; }#mid_slider { 	position:relative; 	float: right; 	width: 440px; 	height: 220px;	  }#tooplate_middle img { 	float: right; 	margin-left: 60px; }#mid_left p { 	margin-bottom: 30px; 	color: #fff; }

The image slider I wanted was more like the one at http://www.eaglegunusa.com/, but I couldn't find code on the net for it.