Mam w divie padding: 0 30px; (potrzebuję, żeby było miejsce na przyciski). W divie mam obrazek img. Chciałabym, żeby się rozciągał na maksymalną szerokość, ale gdy ustawiam img {max-width:100%; } to obrazek jest odsunięty od lewej o te 30px, a po prawej wychodzi poza div. Wiecie jak rozwiązać ten problem?

Rozwiązań jest kilka:
1. Dajesz obrazek jako tło diva i tam je rozciągasz.
2. Dajesz obrazkowi negatywny margines w lewo by zniwelować padding.
3. Nie dajesz dopełnienia dla tego diva, tylko dla elementów, które w tym divie będa się znajdować, ale innych niż ten obrazek.
To tak na szybko.

A co właściwie jest problemem, to że jest odsunięty z lewej, czy to, że z prawej wychodzi poza div?

Obrazek ma być odsunięty po prawej i po lewej o te 30px (padding) i pomniejszony do tych rozmiarów. Procenty nie działają, bo 100% znaczy, że obrazek będzie wielkości całego diva.

@kreatiff nie za bardzo chcę zmieniać cokolwiek w html-u, bo to działa dla dwóch wersji strony - komputerowej i mobilnej. Jak zmieniam coś w html to muszę przerabiać style dla wersji komputerowej...

Pokaż style dla diva i img.

[HTML] pobierz, plaintext 
.sliderright {
	position:relative;
	padding:30px;
	}
.sliderright img {
	margin: auto;
    opacity: 0;
    max-width: 100%;
	 height: auto;
    visibility: invisible;
	 display:none;
	 z-index:-1;
}
.sliderright input:checked ~ img {
	display: block;
	z-index:1;
	visibility:visible;
	opacity: 1;
 
	}
[HTML] pobierz, plaintext 

http://jsfiddle.net/72zgncj8/1/
To na pewno całe style? Struktura html jest taka sama?