html - 如何将这两个元素更紧密地结合在一起？

Question

我正在尝试让 #bigimage 和 #textarea 元素靠得更近一些，但在布局为 col-12 时仍然居中 在小屏幕上。

我应该为此使用媒体查询吗？我试过将它们放在一个单独的容器中，但是当我在小屏幕上测试时，奇怪的事情开始发生。

我在下面尝试的彩色边框是为了让我自己清楚。我只是一个初学者，所以如果您对我的代码有任何其他意见，我将不胜感激。

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><a href="">About Me</a></li>
          <li><a href="">11+ Tuition</a></li>
          <li><a href="">Programming</a></li>
          <li><a href="">Testimonials</a></li>
          <li><a href="">Contact</a></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;
 }