Почему ссылка не сжимается вместе с контейнером?

Question

[Роман Тузов]

Ниже приведены изображения к коду html. Контейнер задаёт отступы по бокам, но ссылки не слушаются и остаются в своём нормальном размере. Как сделать, чтобы ссылки тоже сокращались под ширину контейнера? Скажите, если мало информации

<div class="container">
							<a href="....">
								<div class="work">
									<img src="......">
									<div class="work__description">
										Здесь находится заголовок
									</div>
								</div>
							</a>
					</div>

Comments

[Тарас Шульга]

стили ссылок бы увидеть. И да на будущее гадание по скринам такое се. Залейте на хост/codeopen и просто кидайте ссылку.

[Роман Тузов]

Тарас Шульга,
.works-container a {
margin: 15px 10px;
display: flex;
}
Я предполагал, что на этот вопрос и с такой информацией можно дать ответ, просто прописав ссылкам какие-то стили

[Rustam Bainazarov]

Hutson, очень смешная шутка. Всё взаимосвязано, а вы дали только стили одного .works-container. За код скриншотами тоже плюс.

Где стили .container? Скорее всего там отрицательный отступ какой-нибудь.

[Тарас Шульга]

А картинка у вас случайно не фиксированной ширины?)

[Роман Тузов]

Рустам Байназаров,

.container {
	max-width: 1125px;
	margin: 0 auto;
}
.works-container {
	min-height: 100vh;
	margin-top: 70px;
}
.works-container .container {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.works-container a {
	margin: 12px auto;
	display: flex;
}
.work {
	width: 345px;
	height: 277px;
	box-shadow: 0 5px 30px rgba(0, 0, 0, .30)
}
.work img {
	cursor: pointer;
	width: 100%;
	height: 200px;
	transition: 0.45s all;
}
.work img:hover {
	background: #111;
	opacity: 0.7;
}
.work__description {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 400;
	height: 77px;
	padding: 5px;
	color: #fff;
	text-align: center;
	font-size: 17px;
	transition: 0.4s;
}
.work__description:hover {
	color: #2C64E0;
}

[Rustam Bainazarov]

Вот это зачем задано жёстко по габаритам?

.work {
  width: 345px;
  height: 277px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, .30)
}

[Роман Тузов]

Тарас Шульга, Весь блок work не сжимается, вместе с картинкой. Уже скинул код, там уж точно должно быть всё

[Тарас Шульга]

Рустам Байназаров, ну как видно по вопросам человек новичок в верстке. Поэтому впринципи ожидаемо , что он подумал что кусок кода хватит.

Hutson, ну, а теперь вам - в таких вещах нужно весь весь код , ибо может быть где-то фик ширина, или внешний отступ и т.д. Тобишь вы дали там так сказать данные как будто кроме кроме этих 2 элементов на странице нету ни классов, ни блоков.

[Роман Тузов]

Рустам Байназаров, Точно, недоглядел) Спасибо

[Тарас Шульга]

Hutson, ну собственно вам и ответили на ваш вопрос - у вас блок с фикс шириной.

[Роман Тузов]

Тарас Шульга, Я уже увидел, спасибо

[Rustam Bainazarov]

Hutson, делайте нормальные песочницы. Это занимает мало времени у вас, экономит время у нас, а вы получаете в итоге быстрый ответ. Гадать никто не любит.

Не за что.

P. S. К слову, следуя правилам ресурса, код криншотами запрещён, а такие вопросы подлежат удалению.

[Роман Тузов]

Рустам Байназаров, К вашему слову, кода скриншотом никто не вылаживал, я показал левую часть

[Rustam Bainazarov]

Hutson, тем ещё веселее. Получается, что код никто изначально не видел :))

[Роман Тузов]

Рустам Байназаров, Ну я думал, что html кода хватит, думал может посоветуют просто стили какие-то приписать

[Капитан Какао]

Hutson, закиньте код HTML/CSS на jsfiddle или кодпен и тогда вам помогут решить проблему. А то что вы кидаете куски кода прям сюда , ни кто не будет гадать что там и как...

[Роман Тузов]

Juliya Ya, мне уже ответили и сказали так же как вы 5 часов назад