Дисплей: гибкий разрыв и исправление выравнивания нескольких страниц Гюго

Question

Если вы идете сюда:

https://mrjules.gitlab.io/hugo2

Вы можете видеть, что мое выравнивание немного в моем содержании каждой страницы, за исключением моей страницы about, поскольку мой текст обтекает мое изображение(что я и хочу).Я могу связать эту проблему с удалением display: flex;

Но если я оставлю это, мой текст не обернется вокруг моего изображения, и мое выравнивание для других моих страниц будет в порядке (как изначально был мой сайт), но этоиз-за того, что моя страница-справка не выглядит хорошо с текстом, плавающим под изображением.

Я не знаю, является ли моя проблема css, html или отсутствует / не добавляется класс, поэтому я включил ссылкув мой проект Gitlab.

https://gitlab.com/mrjules/hugo2

и вот мой css

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

html {
    background-color: #39424E;
    font-family: "nexa-light", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px
}

body {
    font-size: 16px;
    font-family: "nexa-light", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    line-height: 2rem;
    font-weight: 300;
    letter-spacing: 1.5px;
    text-shadow: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    opacity: 1
}

@font-face {
    font-family: "Nexa-Light";
    src: url("../font/nexa-light.otf")
}

h1,
h2,
h3 {
    margin-bottom: 0.5em;
    text-align: center;
    color: #fff;
    font-family: "nexa-light", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    border-bottom: 1px solid #f2ca48;
    /* opacity: 0.6 */
}

li {
    list-style-type: none;
    opacity: 0.8
}

li a {
    opacity: 0.9
}

p {
    display: inline;
    /* opacity: 0.8 */
}

a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1.75px solid #f2ca48;
    /* -webkit-transition: .5s ease;
    transition: .5s ease */
}

a:hover {
    color: #f2ca48;
    font-style: none
}

a:active {
    color: #ccc
}

button {
    padding: 20px;
    border: 0px;
    border-radius: 5px;
    background: #fff
}

button:hover {
    -webkit-box-shadow: 5px 5px #111;
    box-shadow: 5px 5px #111
}

hr {
    margin: 1rem 0;
    /* background-color: transparent; */
    width: 50%;
    border-style: solid;
    color: #f2ca48;
    border-width: 1px;
    opacity: 0.6
}

.wrap {
    margin: 0 auto;
    margin-top: 6rem;
    width: 55%
}

.firstcharacter {
  color: #f2ca48;
  /* float: left; */
  font-family: "nexa-light", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 3rem;
    letter-spacing: -3px;
  line-height: 45px;
  padding-top: 15px;
  padding-right: 8px;
  padding-left: 3px;
}

form {
    padding-bottom: 12px;
}

article form {
    margin-bottom: 24px;
}

input,
button {
    border-radius: 0;
    border: none;
    outline: none;
    background: #fff;
    font: 300 16px/1.4 "nexa-light", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 12px;
    box-sizing: border-box;
    cursor: pointer;
    width: 38%;
    vertical-align: middle;
}

input {
    background: #f5f5f5;
    margin-bottom: 4px;
    color: #222;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    border-left: 4px solid #f2ca48;
    margin: 0;
    transition: ease all .4s;
}

button {
    background: #f9415d;
    color: #fff;
    font-weight: 400;
    transition: ease all .4s;
}

button:hover {
    background: #222;
}

.left {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    /* margin-bottom: 1em;
    line-height: 1.8;
    letter-spacing: 2px; */
    /* opacity: 0.8; */
    /* z-index: 1; */
}

.right {
    max-width: 50%;
    /* margin-right: 50px; */
    /* max-height: 100%; */
    margin: 1rem auto;
    float: left;
    /* opacity: 1; */
    position: relative;
  margin: 0 0 10px 10px;
    /* display: inline-block;  */
}

/* @media screen and (min-width: 528px) {
    body {
        padding: 0;
    }
    section {
        margin: 24px auto 48px auto;
    }
    #header .logo {
        margin-top: 24px;
    }
    input {
        width: 65%;
        border-left: 4px solid #f2ca48;
        margin: 0;
        transition: ease all .4s;
    }
    input:focus {
        border-left: 4px solid #222;
    }
    button {
        width: 35%;
    }
    .search-form input {
        border: none;
        width: 100%;
    }
} */

@media screen and (max-width: 960px) {
    .wrap {
        padding: 1rem;
        width: 100%
    }
}

.tag {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: transparent;
    position: relative;
    bottom: 0
}

.section {
    /* display: -webkit-box;
    display: -ms-flexbox;
    display: flex; */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.bottom-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    font-weight: 300;
    align-items: center;
    padding-top: 3rem;
    text-align: center;
}

.footer {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    background-color: transparent;
    position: relative;
    font-weight: 300;
    bottom: 0;
    padding: 2rem 1rem;
    font-family: "nexa-light", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1em;
    opacity: 0.8
}

.footer a {
    border-bottom: none
}

#copyright {
    width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
background-color: transparent;
position: relative;
font-weight: 300;
text-decoration: none;
letter-spacing: 1.5px;
bottom: 0;
padding: 0 0 2rem;
font-family: "nexa-light", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1rem;
line-height: 1em;
opacity: 0.8;
}

#splash {
    margin: auto 0;
    height: 100vh;
    width: 55%;
    overflow: hidden
}

@media screen and (max-width: 736px) {
    #splash {
        width: 90%
    }
}

#big-link {
    font-family: "nexa-light", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 3rem;
    font-weight: 300;
    margin-bottom: 2rem;
    line-height: 1.5em
}

#title {
    margin-top: 3rem;
    font-family: "nexa-light", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 2rem;
    line-height: 3rem;
    font-weight: 300;
    border-bottom: 1px solid #f2ca48;
    margin-bottom: 2rem
}

#content {
    margin: 4rem 0;
    line-height: 2em;
    letter-spacing: 2px;
    font-weight: 300;
}

#content h1,
#content h2,
#content h3 {
    margin: 1em 0em;
    text-align: left
}

#content p {
    margin-bottom: 1em;
    line-height: 1.8;
    letter-spacing: 2px;
    opacity: 0.8;
}

#content pre {
    line-height: 2rem;
    border-radius: 2px;
    background-color: #4f5b6b;
    padding: 1rem;
    max-width: 100%;
    overflow-x: scroll
}

#content pre>code {
    border: none
}

#content code {
    font-size: 0.9rem;
    font-family: 'Source Code Pro', monospace;
    background-color: #4f5b6b;
    padding: 0.2rem;
    border-radius: 2px
}

#content img {
    max-width: 50%;
    float: right;
    /* max-width: 100%; */
    /* display: block; */
    /* margin: 2rem auto; */
    opacity: 1
}

.ableft {
    /* margin-bottom: 1em; */
    margin: 0 0 10px 10px;
    /* margin-top: -250px; */
    line-height: 1.8;
    letter-spacing: 2px;
    float: left;
    /* opacity: 0.8; */
    /* z-index: 1; */
    display: inline;
}

#content blockquote {
     background-color: rgba(204, 204, 204, 0.152); 
    color: #ccc;
    font-size: 21px;
    padding: 1rem;
    margin: 2rem 1rem 2rem 1rem;
    font-style: italic;
    border-radius: 2px
}

#content blockquote ul {
    margin-top: 1rem
}

#content blockquote li {
    list-style: disc
}

#content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    overflow-x: auto
}

#content table th {
    font-size: 0.9rem
}

#content table td,
#content table th {
    padding: 2px 5px;
    text-align: center;
    border: 1px solid #ccc
}

#content li {
    /* list-style: inside; */
    margin-left: 1rem;
    line-height: 2
}

#content li:last-child {
    margin-bottom: 1rem
}

#tag {
    padding: 0.25em 0em;
    margin-right: 0.5em;
    opacity: 0.6
}

.grid {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    grid-auto-rows: 400px
}

@media screen and (max-width: 736px) {
    .grid {
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr))
    }
}

.grid>div {
    background-color: transparent;
    /* overflow: hidden */
}

.grid>div>img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 1
}

.grid>div>a>img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 1
}

.go-left {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.go-right {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

.go-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}