Текст не оборачивается вокруг изображения

Question

Я использую тему Хьюго, и в css у меня возникают проблемы с поиском свойства, которое не позволяет мне обернуть текст вокруг изображения.

Когда я раздеваю свой CSS до того, что хочу:

http://jsfiddle.net/d7cLxbs0/10/

Работает.

Мне нужна другая пара глаз, потому что мои не могут видеть то, что я не знаю, что я ищу.

Edit.

Я включил демонстрацию того, как сейчас работает мой CSS.

http://jsfiddle.net/obpjh4em/9/

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

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

body {
    font-size: 16px;
    font-family: "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
}

h1,
h2,
h3 {
    margin-bottom: 0.5em;
    text-align: center;
    color: #fff;
    font-family: "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: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 6rem;
  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 "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 {
    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: right;
    /* opacity: 1; */
    position: relative;
    display: inline-block; 
}

@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: "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: "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: "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: "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: 2rem 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 {
    width: 100%;
    /* max-width: 100%; */
    display: block;
    /* margin: 2rem auto; */
    opacity: 1
}

#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;
}

.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
}

Answer 1

переполнение: скрытое вызывает это.

Удалите его отсюда:

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

Answer 2

Проблема в демонстрации заключается в том, что body - это flex.Удалите эти строки из кода:

display: -webkit-box;
display: -ms-flexbox;
display: flex;

и проблема решена.

http://jsfiddle.net/obpjh4em/12/

Answer 3

Вот и все

body {
  padding: 2em;
  background: white;
}

.left {
  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: 2rem auto;
  margin-bottom:420px;
  float: right;
  /* opacity: 1; */
  /* position: absolute; */
  display: inline-block; 
}
.wrap{
  margin-bottom: 1em;
  line-height: 1.8;
  letter-spacing: 2px;
  opacity: 0.8;
  /* z-index: 1; */
}

<img class="right" alt="Sample Photo" src="http://placehold.it/200x200/" />

<div class="left">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur aliquam convallis. Pellentesque id vestibulum nibh.
  Nulla eu neque lobortis, luctus sapien sed, ultrices justo.
  <br> Aenean at erat at felis.
  <br>
  <br>
  <div class='wrap'>
    Nullam ultricies egestas imperdiet. Nullam nec pharetra ante. Morbi mi neque, commodo vel sodales a, facilisis et tortor.
    Aenean fringilla lorem a quam ullamcorper rutrum. Maecenas eu porta ante, ac tincidunt lectus. Etiam vel hendrerit ipsum,
    ut posuere metus. Quisque id scelerisque odio, nec egestas nunc. Donec enim purus, lacinia nec faucibus at, congue pretium
    erat. Suspendisse ac mollis dolor. Curabitur tempor semper nunc, vel semper orci aliquet sed. Cras nec dui sodales, faucibus
    justo vel, molestie purus...
  </div>
</div>