After mentioning using the HTML code below and attempting to apply a CSS rule to place a border around the "third-content-wrapper" class, it seems that the border is only applied to the text and images as expected.
I noticed you were aiming to have the border around the third-content-wrapper, but it appears differently than what you wanted. Maybe something like this could be more aligned with your expectations:
body{
padding: 0;
margin: 0;
}
.third-content-wrapper {
border: solid 2px rgba(211,211,211,0.7);
padding: 10px 30px;
width: 100%;
height: 100vh;
}
<div class="third-content">
<div class="third-content-wrapper">
<h2> Interests </h2>
<p> Enjoying staying active by running, circuit training and attending the gym. Enjoy playing tennis, Badminton & Table tennis. I play guitar and also enjoy landscape painting having done art at A-Level and GCSE.<p>
<div id="images-interests">
<a href="images/badminton.jpg"> <img src="images/badminton.jpg"> </a>
<a href="images/guitar.jpg"> <img src="images/guitar.jpg"> </a>
<a href="images/tennis.jpg"> <img src="images/tennis.jpg"> </a>
<a href="images/painting1.jpg"> <img src="images/painting1.jpg"> </a>
</div>
</div>
</div>
The outcome is quite similar, however, when viewed in full screen mode, the alignment may not be exactly as desired. You can adjust the dimensions and consider centering the div within the border for a better result. For instance:
body{
padding: 0;
margin: 0;
}
.third-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.third-content-wrapper {
border: solid 2px rgba(211,211,211,0.7);
padding: 10px 30px;
width: 75%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<div class="third-content">
<div class="third-content-wrapper">
<h2> Interests </h2>
<p> Enjoying staying active by running, circuit training and attending the gym. Enjoy playing tennis, Badminton & Table tennis. I play guitar and also enjoy landscape painting having done art at A-Level and GCSE.<p>
<div id="images-interests">
<a href="images/badminton.jpg"> <img src="images/badminton.jpg"> </a>
<a href="images/guitar.jpg"> <img src="images/guitar.jpg"> </a>
<a href="images/tennis.jpg"> <img src="images/tennis.jpg"> </a>
<a href="images/painting1.jpg"> <img src="images/painting1.jpg"> </a>
</div>
</div>
</div>
For additional information on flex-box, you can visit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Just to note, the approach I took with flex-box can be achieved in a more refined manner :P