Las Line's alignment is not proper - html

Question

selected-works div's last lines's alignmet is not proper. It's text-align property has value of justify but there is a problem in last line. It is like left based not justify. Other lines have no any problem. How can I solve this problem?
* {
margin: 0;
padding: 0;
}
body {
background: #000;
text-align: center;
color: rgb(231, 231, 231);
}
#wrapper {
width: 60%;
margin: 0 auto;
}
#hello {
padding: 50px;
border-bottom: 3px double rgb(185, 185, 185);
}
#avatar {
border-radius: 50%;
width: 130px;
height: auto;
margin-bottom: 15px;
}
#hello-header {
margin-bottom: 15px;
font-size: 45px;
}
#header-p {
font-size: 36px;
}
.link {
text-decoration: none;
color: rgb(241, 225, 1);
}
.link:hover {
color: gray;
transition: 0.2s;
}
#selected-works {
width: 100%;
margin: 50px 0;
padding-bottom: 50px;
text-align: justify;
border-bottom: 1px solid gray;
}
#sw-header {
margin-bottom: 35px;
text-align: center;
}
.work {
width: 32%;
display: inline-block;
text-align: left;
}
.work img {
width: 100%;
height: auto;
}
.work img:hover {
opacity: .5;
transition: opacity .3s linear;
}
<div id="wrapper">
<div id="hello">
<img id="avatar" src="https://jonchretien.com/img/avatar.jpg">
<h2 id="hello-header">Hello</h2>
<p id="header-p">
My name is Jon Chretien. I’m a <a class="link" href="https://en.wikipedia.org/wiki/New_York_City">NYC</a> based front end engineer currently working on web apps for artists at <a class="link" href="https://www.spotify.com/">Spotify</a>. I previously
built editorial & marketing projects at <a class="link" href="https://www.nytimes.com/">The New York Times</a>.
</p>
</div>
<div id="selected-works">
<h1 id="sw-header">Selected Works</h1>
<div class="work">
<a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
<h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
<p>Fan insights for artists & managers to discover more about their audience.</p>
</div>
<div class="work">
<a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
<h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
<p>Fan insights for artists & managers to discover more about their audience.</p>
</div>
<div class="work">
<a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
<h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
<p>Fan insights for artists & managers to discover more about their audience.</p>
</div>
<div class="work">
<a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
<h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
<p>Fan insights for artists & managers to discover more about their audience.</p>
</div>
<div class="work">
<a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
<h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
<p>Fan insights for artists & managers to discover more about their audience.</p>
</div>
<div class="work">
<a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
<h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
<p>Fan insights for artists & managers to discover more about their audience.</p>
</div>
<div class="work">
<a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
<h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
<p>Fan insights for artists & managers to discover more about their audience.</p>
</div>
<div class="work">
<a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
<h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
<p>Fan insights for artists & managers to discover more about their audience.</p>
</div>
<div class="work">
<a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
<h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
<p>Fan insights for artists & managers to discover more about their audience.</p>
</div>
</div>
</div>
selected-works div's last lines's alignmet is not proper. It's text-align property has value of justify but there is a problem in last line. It is like left based not justify. Other lines have no any problem. How can I solve this problem?

Answer 1

By default,
text-align: justify;
justifies all lines, except last one. If you also want the last line justified, you have to use text-align-last:
text-align-last: justify;
Note: This property is part of CSS text module 3 and current browser support sits at 77.98%.
To add support for it in legacy browsers, one would need to use a polyfill.