How do I bring these two elements closer together? - html

Question

I'm trying to get the #bigimage and #textarea elements to sit closer together, but then still be centered when laid out as col-12 on a small screen.
Should I use a media query for this? I've tried putting them in a separate container, but strange stuff starts happening when I test that on a small screen.
The colored borders in my attempt below are for my own clarity. I'm just a beginner so if you have any other comments about my code I'd really appreciate it.
header {
border: 3px solid red;
text-align: center;
margin-top: 30px;
}
li {
display: inline;
text-align: center;
padding: 3%;
}
img {
width: 300px;
}
ul {
border: 2px solid green;
margin-bottom: 20px;
margin-top: 40px;
}
h2 {
border: 2px solid yellow;
margin-top: 30px;
}
#textarea {
border: 3px solid green;
text-align: justify;
margin-top: 30px;
width: 200px;
}
#bigimage {
border: 3px solid green;
text-align: center;
}
p {
border: 2px solid red;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 300px;
margin: 0 auto;
}
#mainstuff {
width: 50% margin: 0 auto;
border: 3px solid yellow;
}
.container {
border: 5px solid blue;
}
.row {
margin-top: 30px;
position: relative;
}
img {
border: 2px solid red;
}
#textandphoto {
width: 800px;
}
#media (min-width: 1500px) {
.container {
max-width: 900px;
}
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12">
<header>
<h1>Raphael Hetherington</h1>
<h2>11+ Tutor</h2>
<ul>
<li>About Me</li>
<li>11+ Tuition</li>
<li>Programming</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</header>
</div>
</div>
<div class="row" id="mainstuff">
<div class="col-12 col-md-6" id="bigimage">
<img src="//lorempixel.com/400/200/abstract/5/" alt="">
</div>
<div class="col-12 col-md-6" id="textarea">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum omnis harum nesciunt repellendus laudantium quam quo ea, placeat, totam rem laboriosam vero, asperiores architecto. Dolores earum, architecto nemo molestiae quo. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Corporis accusamus modi eaque placeat voluptates nihil quasi non et similique magnam architecto itaque nobis expedita amet, provident doloribus eveniet quis explicabo?</p>
</div>
</div>
</div>

Answer 1

#textarea {
border: 3px solid green;
text-align: justify;
margin-top: 0; /* 0 instead of 30px*/
width: 200px;
}