Как выровнять по краю div?

Question

[Pavel]

Привет, есть вопрос. Как сделать чтоб фото было ровно прижато с двух краев.
Красном я отметил те место там где у меня расходится фото.

Изанчально я хотел сделать большие фото в маленькие примерно 100х100px.
Пытался сам, и в итоге получилось вот такое расхождение.

css блока

.main .work{
    display: block;
    width: 33.33333333333333%;
    height: auto;
    float: left;
    position: relative;
    overflow: hidden;
}
.main .work .media{
    width: 100%;
    vertical-align: middle;
.main .work .caption{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    background: #ffffff;
    opacity: 0;
}
.main .work a:hover .caption{
    opacity: 1;
}
.work .caption .work_title{
    display: block;
    width: 100%;
    position: absolute;
    text-align: center;
    top: 50%;
    margin-top: -40px;
}
.main .work .caption h1{
    position: relative;
    display: inline-block;
    max-width: 90%;
    padding: 20px 0;
    z-index: 77;
    color: #454545;
    font-family: 'Russo One', sans-serif;
    font-size: 16px;
    letter-spacing: .5px;
    border-bottom: 1px solid #bfbbbb;
    border-top: 1px solid #bfbbbb;
}

<section class="main clearfix">
		<div class="work">
			<a href="inner.html">
				<img src="../img/work1.jpg" class="media" alt=""/>
				<div class="caption">
					<div class="work_title">
						<h1>Тестовый текст</h1>
					</div>
				</div>
			</a>
		</div>

Буду признателен кто поможет.

Comments

[Bastax13]

В песочницу загрузите, больше людей поможет

[Pavel]

Анатолий: да я все надеюсь что тут напишут :)

[Bastax13]

pashadark: Я вот, например, не очень хочу разбираться в этом коде без демо в песочнице. Многие, когда видят такое безобразие, просто уходят. Если не на локалхосте - дайте ссылку на сайт (в крайнем случае на GitHub Pages загрузите)

[Pavel]

Анатолий: спасибо в следующий раз учту. Но сейчас я сам уже дошел в чем дело :)

Answer 1

[Pavel]

width: 20%;
Спасибо сам себе программист !