Text does not wrap around image

Question

I'm using a Hugo theme and in the css, I'm having trouble locating a property that's not letting me wrap my text around an image.

When I strip my css down to exactly what I want:

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

It works.

I need another pair of eyes because mine can't see what I don't know what I'm looking for.

Edit.

I've included a demo of how my css currently is.

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

The problem in the demo is that body is flex. Remove these lines from the code:

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

and the problem is solved.

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

Answer 2

There you go

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>

Answer 3

overflow: hidden is causing this.

Remove it from here:

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