<div id="main">
    <div class="comments-comments">
        <div id="comment-1">
            <ul>
                <li>
                    <div class="user-img-sub"><img class="user-avatar-sub"
                                                   src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-17.jpg"/>
                    </div>
                </li>
                <li>
                    <div class="user-name-sub"><a href="">John Doe</a></div>

                </li>
                <li id="comment-1-itself">Hello Stackoverflow! I hope I can get an answer for this question! As you can
                    see, starting from the third
                    line, I am experiencing this flow issue with CSS.
                </li>

            </ul>
        </div>
    </div>
</div>

#main {
    width: 400px;
    min-height: 200px;
    border: 1px solid black;
    margin: 0 auto;
    margin-top: 100px;
    overflow: hidden;
    position: relative;
    border-radius: 3px;
}

.comments-comments {
    width: 100%;
    border: 1px solid black;
    min-height: 50px;
    padding: 5px 0 20px 10px;
}

#comment-1 ul {
    margin: 5px 5px 0 5px;
    padding: 0;
}

#comment-1 ul li {
    list-style-type: none;
    display: inline;
}

.user-avatar-sub {
    width: 24px;
    height: 24px;
    border-radius: 3px;
    float: left;
}

.user-name-sub {
    float: left;
    margin: 0 0 0 3px;
    font-size: 14px;
}

#comment-1-itself {
    margin-left: 3px;
    padding: 0;
}