I have a container that uses width:90%;
to create gutters on the left and right. Within the container, I would like the first child to use up the full width of the screen(ignoring the gutters). To do this I am using width:100vw
and left:-5%
. I would expect that this would make the child element take up the full viewport width and start at the very edge of the left side of the screen, but there is a small sliver of the gutter visible to the left. Is it possible to make it line up with the left edge perfectly?
body,html {
margin:0;
padding:0;
}
.outer-container {
width:100vw;
background:red;
position:relative;
}
.inner-container {
width: 90%;
margin:0 auto;
position:relative;
}
.image-container {
position:relative;
}
.image-container:first-child {
width:100vw;
left:-5%;
}
img {
width:100%;
}
<div class="outer-container">
<div class="inner-container">
<div class="image-container">
<img src="https://fastly.picsum.photos/id/501/500/500.jpg?hmac=LexAc6tjpzq0VN8f7zj8JNiU6vcLhPTqSX17dsaXP3o" />
</div>
<div class="image-container">
<img src="https://fastly.picsum.photos/id/193/500/500.jpg?hmac=5eXseIVa0Mq_-eotbpTeHTABeV-agyM79NghBnEmCJw" />
</div>
<div class="image-container">
<img src="https://fastly.picsum.photos/id/835/500/500.jpg?hmac=QnpnNG0BSK7JQNhA9VokyFMyhTwTtifkHYHWSsd2YAU" />
</div>
</div>
</div>
2
Answers
Can you try the below css. Don’t need left:-5%; Hope this helps.
Is this what you are trying to achieve.
I am sorry.I forgot to add one more style to the css.
please add this code also and try