CSS网格是一个很好的布局工具。我在CSS的每一行都放了解释器来描述它的功能。这里有一个关于css tricks的很好的介绍和一个来自Kevin Powell的很好的视频来帮助你开始。祝你好运！

a {
  text-transform: uppercase;
  display: inline-block;
  padding: 5px;
  margin: 35px 30px;
  text-decoration: none;
}

nav {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 100%;
  height: 100px
}

.navigation ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.navigation li {
  font-weight: 100;
  letter-spacing: 2px;
  list-style-type: none;
  color: #8D7B68;
  font-size: larger;
}

body {
  background-color: #ffffff;
  margin: 0 auto;
}

li:hover {
  color: #ed2323;
}

#banner {
  background-color: rgba(164, 144, 124, .8);
  background-size: cover;
  background-position: bottom center;
  /* height: 500px; removed this as resizing your window may cause the text and/or image to overflow */
  /*width: 100%; not needed */
}

#banner .content h1 {
  border: 3px solid white;
  /*position: relative; got rid of this, we'll use the grid to position this */
  /*top: 50px; got rid of this, we'll use the margin below to position this */
  width: 400px;
  margin: 50px auto; /* changed this from margin: 0 auto; to add a bit of space between the title and the container */
}

.title {
  grid-area: header; /* added this to place it in the 'header' area. */
}
h1 {
  color: white;
  font-size: 42px;
  font-weight: 600;
  text-align: center;
  padding: 10px;
  letter-spacing: 1px;

}

.milk {
  /* display: flex; removed this - not necessary */
  margin: auto 50px; /* changed this from margin: 0 0 0 150px; to put a nice border around your image*/
  width: 350px;
  height: 350px;
  border: rgba(164, 144, 124, .9) 3px solid;
  grid-area: img; /* put this in the image grid area (see .content below) */
  place-self: center; /* place the image in the center of the grid element */
}

.milkp {
  /*margin: 0 675px 0 675px; removed this - we'll use the grid to position this content */
  grid-area: milkp; /* put this in the milkp grid area (see .content below) */
  justify-self: center; /* put the text in the middle of the container */
  text-align: center;
  max-width: 400px;
}

p {
  color: rgb(0, 0, 0);
  font-size: 15px;
  font-weight: 300;
  padding: 10px;
  letter-spacing: 1px;
  line-height: 25px;
}

/* added this to use css grid to position your elements */
.content {
  display: grid;
  grid-template-columns: fit-content(0) 1fr;
  grid-template-areas: "img header"
                       "img milkp";
}

<nav class="navigation">
  <ul>
    <a href="./index.html">
      <li>početna stranica</li>
    </a>
    <a href="./proizvodi.html">
      <li>proizvodi</li>
    </a>
    <a href="./kontakt.html">
      <li>kontakt</li>
    </a>
  </ul>
</nav>
<div id="banner">
  <div class="content">
    <div class='title'><!-- added this to act as a wrapper for your header -->
      <h1>mliječna čokolada</h1>
    </div>
    <img src="https://i.pinimg.com/564x/47/99/71/47997186f6af47d86181766d78d55f47.jpg" alt="choco" class="milk">
    <p class="milkp">
      Prvi niz, upućen voljenom mladiću, bolje je uređen i sadrži nekoliko kraćih nizova koji se tiču njihova odnosa ili obrađuju pripadne ideje. Tako soneti 117 potiču mladića da nađe životnu družicu i dobije djecu; soneti 41 i 42 upozoravaju da je pjesnikova
      ljubavnica zavela mladića tijekom pjesnikova izbivanja; soneti 7886 opisuju pjesnikarivala koji je očevidno pokušao pridobiti mladića za sebe; u sonetima 8790 iskazana je zabrinutost da je mladić potpuno zaboravio pjesnika
    </p>
  </div>
</div>