Why does my website look fine in my code editor preview but it is messed up on the live website? – SEO

  // Closes the sidebar menu
    $("#menu-close").click(function(e) {
        e.preventDefault();
        $("#sidebar-wrapper").toggleClass("active");
    });
    // Opens the sidebar menu
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#sidebar-wrapper").toggleClass("active");
    });
    // Scrolls to the selected menu item on the page
    $(function() {
        $('a[href*=#]:not([href=#],[data-toggle],[data-target],[data-slide])').click(function() {
            if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') || location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });
    //#to-top button appears after scrolling
    var fixed = false;
    $(document).scroll(function() {
        if ($(this).scrollTop() > 250) {
            if (!fixed) {
                fixed = true;
                // $('#to-top').css({position:'fixed', display:'block'});
                $('#to-top').show("slow", function() {
                    $('#to-top').css({
                        position: 'fixed',
                        display: 'block'
                    });
                });
            }
        } else {
            if (fixed) {
                fixed = false;
                $('#to-top').hide("slow", function() {
                    $('#to-top').css({
                        display: 'none'
                    });
                });
            }
        }
    });
$(document).ready(function() {
	// Test for placeholder support
    $.support.placeholder = (function(){
        var i = document.createElement('input');
        return 'placeholder' in i;
    })();

    // Hide labels by default if placeholders are supported
    if($.support.placeholder) {
        $('.form-label').each(function(){
            $(this).addClass('js-hide-label');
        });  

        // Code for adding/removing classes here
        $('.form-group').find('input, textarea').on('keyup blur focus', function(e){
            
            // Cache our selectors
            var $this = $(this),
                $parent = $this.parent().find("label");

            if (e.type == 'keyup') {
                if( $this.val() == '' ) {
                    $parent.addClass('js-hide-label'); 
                } else {
                    $parent.removeClass('js-hide-label');   
                }                     
            } 
            else if (e.type == 'blur') {
                if( $this.val() == '' ) {
                    $parent.addClass('js-hide-label');
                } 
                else {
                    $parent.removeClass('js-hide-label').addClass('js-unhighlight-label');
                }
            } 
            else if (e.type == 'focus') {
                if( $this.val() !== '' ) {
                    $parent.removeClass('js-unhighlight-label');
                }
            }
        });
    } 
});

// When the user clicks on <div>, open the popup
function myFunction() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
}

#designer .container{
    text-align:center;
    max-width:450px;
    margin:0 auto;
}
#designer .block{
    width: 31em;
    height:22em;
    margin:10px;
    display:inline-block;
    background:none;
}
#designer .block1{
	width: 31em;
    height:22em;
    margin:10px;
    display:inline-block;
    background: none;
    float: right;
}

<section id="designer" class="section-padding">
             <div id="container">
    <div class="block"><img src="img/evan1.png"></div>
    <div class="block1"><h3>Your Designer</h3>
              <h4> Evan Braun</h4>
			  	<p>Hailing from The Queen City (Cincinnati, OH), I made my way down to Lexington, Kentucky to pursue a career in Business Management alongside computer science courses at the University of Kentucky. Computer literacy has been an interest throughout my life. Growing up, I developed a passion for it through graphic design and media editing which eventually led me to where I am today - web design.</p>
        <p> <b>I've made it my mission statement to not consider a project completed until the customer is 100% satisfied with their product.</b></p></div>
    <div class="block">
	    <h5><span>Experience</span></h5>
	    <p><i class="fa fa-check-square-o" aria-hidden="true"></i> 3+ Years of programming practice in HTML, CSS, PHP, JQuery, and JavaScript.</p>
	    <p><i class="fa fa-check-square-o" aria-hidden="true"></i> Trained in SEO &amp; SEM from DreamWalker Social Marketing | Lexington, KY.
		<p><i class="fa fa-check-square-o" aria-hidden="true"></i> 5+ Years of graphic design experience in Adobe Photoshop + Illustrator.
		<p><i class="fa fa-check-square-o" aria-hidden="true"></i> 0 Clients disappointed.
	    
    </div>
    <div class="block1"> 
	    <h5>I like getting to know my clients personally</h5>
            <p>Being a native of Cincinnati and Lexington, I know that many small business owners in the area prefer dealing face-to-face with their service providers. It’s all part of building trust and confidence. It also allows me to get to know your business on a deeper level, and this has a very positive impact on how your website design turns out.<br><br>
Just let me know how you prefer to work when you <a href="#contact">contact</a> me.</p></div>
</div>
            </div> <!-- container --> 
    </section>