targetting only left and right divs, not middle - html

Question

tried searching for this but haven't found a solution.
I would have a responsive wrapper with multiple (no set number) div's.
So like a gallery!
I would like to only target the left and right divs and remove those(left margin for left div, right margin for the right div) margins so that the divs are against the sides of the screen.
fiddle
.work {
position: relative;
float: left;
width: 20%;
height: 20%;
margin: 5%;
background-color: red;
}
.wrapper_work {
width: 80vw;
height: 100vh;
background-color: black;
}
<div class='wrapper_work'>
<div class='work'>
<p>
this is my portfolio gallery
</p>
</div>
<div class='work'>
<p>
this is my portfolio gallery
</p>
</div>
<div class='work'>
<p>
this is my portfolio gallery
</p>
</div>
<div class='work'>
<p>
this is my portfolio gallery
</p>
</div>
</div>

Answer 1

You can use the pseudo-elements first-child and last-child like this:
.work:first-child {
margin-left: 0;
}
.work:last-child {
margin-right: 0;
}
Updated fiddle: https://jsfiddle.net/sswrL7pq/1/
Margins are probably not the way to go for a truly responsive layout with an arbitrary number of content divs, since you don't know which ones will be at the edges of your layout. There are some different ways of approaching it.
Flex box layouts:
You can style your container similar to this:
display: flex;
justify-content: space-between;
flex-flow: row wrap;
The contents will be arranged in rows, with any extra space placed between the contents, leaving them flush with the edges. Flex box is for newer browsers, IE11+.
Fiddle using flex layout
For older browsers you can take advantage of inline-block and justify to get a similar effect. It isn't quite as clean but works quite well. The key styles are these:
.wrapper {
font-size: 0.1rem;
text-align: justify;
}
.wrapper:after {
content: "";
width: 100%;
display: inline-block;
}
.item {
display: inline-block;
font-size: 1rem;
}
Fiddle using justify layout

Answer 2

you can use CSS 3 flexbox for this:
UPDATE: Included images
body,
p {
margin: 0
}
div {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background: black
}
p {
min-width:20%;
margin:10px 0;
border: red solid;
}
img {
max-width: 100%;
display:block;
margin:auto
}
<div class='work'>
<p>
<img src="http://dummyimage.com/150x150/fff/000">
</p>
<p>
<img src="http://dummyimage.com/150x150/fff/000">
</p>
<p>
<img src="http://dummyimage.com/150x150/fff/000">
</p>
<p>
<img src="http://dummyimage.com/150x150/fff/000">
</p>
<p>
<img src="http://dummyimage.com/150x150/fff/000">
</p>
<p>
<img src="http://dummyimage.com/150x150/fff/000">
</p>
<p>
<img src="http://dummyimage.com/150x150/fff/000">
</p>
<p>
<img src="http://dummyimage.com/150x150/fff/000">
</p>
</div>

Answer 3

.work:first-child,.work:last-child {
margin: 5% 0;
}