Problem z kodem Html,Css

Witam.

Mam problem z kodem a mianowicie chodzi głównie o wersję na desktop.

Po przejściu z trybu mobilnego na desktopowy wszystkie dolne sekcje oprócz hedera na górze strony i sekcij ze zdj. są wąskie o co może chodzić?

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <title>RWD</title>
    <meta name="viewport" content="width=device-width, initial-scale=2.0">
    <link href="https://fonts.googleapis.com/css?family=Lato&amp;subset=latin-ext" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

</head>

<body>
    <header>
        <div id="header-inner">
            <a href="index.html" id="logo"></a>
            <nav>
                <a href="#" id="menu-icon"></a>
                <ul>
                    <li><a href="index.html" class="current">Home</a></li>
                    <li><a href="#">Skills</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Our Team</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <section class="banner">
        <div class="banner-inner">
            <img src="img/rocket_design.png" alt="">
        </div>
    </section>
    <section class="one-fourth" id="html">
    <section class="one-fourth" id="html">
        <td><i class="fa fa-html5"></i></td>
        <h3>HTML</h3>
    </section>
    <section class="one-fourth" id="css">
        <td><i class="fa fa-css3"></i></td>
        <h3>CSS3</h3>
    </section>
    <section class="one-fourth" id="seo">
        <td><i class="fa fa-search"></i></td>
        <h3>SEO</h3>
    </section>
    <section class="one-fourth" id="social">
        <td><i class="fa fa-users"></i></td>
        <h3>SOCIAL</h3>
    </section>

    <section class="inner-wrapper">
        <article id="tablet">
            <img src="img/hand_ipad.png" alt="">
        </article>
        <aside id="tablet2">
            <h2>MOBILE, TABLET, DESKTOP</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error voluptatum, beatae recusandae sequi porro nisi labore quam accusamus vero facilis, illo alias minima ea! Deleniti veritatis quod maxime vitae voluptas doloribus earum asperiores possimus, numquam ipsum minus! Perspiciatis hic obcaecati alias ipsum eum.</p>
        </aside>
    </section>
    <section class="inner-wrapper-2">
        <article id="mobile">
            <h2>ACROSS EACH DEVICE</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde dignissimos excepturi nemo ex quas facilis, placeat officiis consequatur aspernatur iste amet fugiat iusto totam hic, deleniti, voluptate dolores vel eligendi! Eos minima nemo, accusamus doloribus. Aliquam itaque quis asperiores officia reprehenderit maiores ad.</p>
        </article>
        <aside class="hand-mobile">
            <img src="img/hand_mobile.png" alt="">
        </aside>
    </section>
    <section class="inner-wrapper">
        <article>
            <img src="img/desktop.png" alt="">
        </article>
        <aside id="desktop">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quo aliquid molestias consectetur alias odio suscipit dignissimos, incidunt dolorem repudiandae, veritatis voluptatibus mollitia tempore nihil culpa exercitationem corporis at enim. Exercitationem eaque, magnam. Magnam, cum, corrupti.</p>
        </aside>
    </section>
    <section class="inner-wrapper-3">
        <section class="one-third" id="google">
            <h3>GOOGLE SEARCH</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam hic, commodi eius ipsam harum sapiente facilis dignissimos modi molestiae repellendus consectetur mollitia fugiat dolor asperiores!</p>
        </section>
        <section class="one-third" id="marketing">
            <h3>MARKETING</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae nam obcaecati enim, minima dolores? Amet, voluptatem. Mollitia nobis nesciunt similique. sit amet, consectetur adipisicing elit.</p>
        </section>
        <section class="one-third" id="customers">
            <h3>HAPPY CUSTOMERS</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic beatae facere quibusdam quod aliquam voluptatum molestiae, perferendis odit sequi, quaerat debitis numquam quis.</p>
        </section>
    </section>
    <section id="smiley">
        <h2>: )</h2>
    </section>
    <footer>
        <ul class="social">
            <li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li>
            <li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></li>
            <li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
        </ul>
    </footer>
    <footer class="second">
        <p>&copy;.....</p>
    </footer>
</body>

</html>

*{
    margin: 0;
    padding: 0;
    border: 0;
}

body{
    font-family: 'Lato', sans-serif;
    background: #f5f5f5;
    color: #67727a;
    margin: 0;
}

h2{
    font-size: 250%;
    font-weight: 700;
    text-align: center;
    padding-top: 2%;
    color: #f5f5f5;
}

h3{
    font-size: 175%;
    line-height: 155%;
    padding: 5% 0;
    font-weight: 400;
    color: #f5f5f5;
}

p{
    font-family: 'Lato', sans-serif;
    color: #f5f5f5;
    font-size: 150%;
    line-height: 150%;
    padding: 4%;
    text-indent: 2%;
    text-align: justify;
}

img{
    max-width: 100%;
    height: auto;
    width: auto;
    margin-bottom: -4px;
}

header{
    background: #6991ac;
    width: 100%;
    height: 86px;
}

#header-inner{
    max-width: 1200px;
    margin: 0 auto;
}

#logo{
    margin: 20px;
    float: left;
    width: 200px;
    height: 60px;
    background: url(../img/RD.png) no-repeat;
}

nav{
    float: right;
    padding: 25px 20px;
}

#menu-icon{
    display: hidden;
    width: 40px;
    height: 40px;
    background: url(../img/nav.png) center;
}

a:hover#menu-icon{
    border-radius: 4px 4px;
}

ul{
    list-style-type: none;
}

nav ul li{
    font-size: 125%;
    display: inline-block;
    float: left;
    padding: 10px;
}

nav ul li a{
    font-family: 'Alegreya Sans', sans-serif;
    color: #f5f5f5;
    text-decoration: none;
    transition: ease 0.3s;
}

nav ul li a:hover{
    color: #c3d7dc;
}

.current{
    color: #c3d7dc;
}

.banner{
    width: 100%;
    background: #6991ac;
}

.banner-inner{
    max-width: 1100px;
    margin-bottom: 10px;
    margin: 0 auto;
}

.one-fourth{
    width: 25%;
    float: left;
    text-align: center;
}

#html{
    background: #f1aa90;
}

#css{
    background: #beb9ad;
}

#seo{
    background: #aadcd2;
}

#social{
    background: #a2b2c1;
}

.one-fourth i{
    color: #f0f0f0;
    font-size: 500%;
    padding: 13% 0 4% 0;
}

.inner-wrapper{
    float: left;
    width: 100%;
    background: #c3d7df;
}

article{
    float: left;
    margin: 0 auto;
    width: 50%;
    height: auto;
}

#tablet{
    background: #c3d7df;
}

#tablet2{
    background: #a2b1c1;
}

#mobile{
    background: #beb9ad;
}

#desktop{
    background: #f1aa90;  
}

aside{
    float: right;
    margin: 0 auto;
    width: 50%;
    height: auto;
}

.inner-wrapper-2{
    float: left;
    width: 100%;
    background: #c3d7df;
}

.inner-wrapper-3{
    float: left;
    width: 100%;
    background: #aadcd2;
}

.one-third{
    width: 33.333%;
    float: left;
    text-align: center;
}

#google,#marketing {
    background: #a2b1c1;
}

#marketing{
    background: #beb9ad;
}

#smiley{
    background: #aadcd2;
}

footer{
    background: #6991ac;
}

.social{
    list-style-type: none;
    text-align: center;
}

.social li{
    display: inline;
}

.social i{
    font-size: 460%;
    margin: 1%;
    padding: 5% 5% 5% 4%;
    color: #c3d7df;
    transition: ease 1s;
}

.social i:hover{
    color: #f5f5f5;
}

footer.second{
    border-top: 1px solid #aadcd2;
    background: #544b59;
    max-height: 55px;
    margin: 0;
}

footer.second p{
    text-align: center;
    padding: 5px 0 9px 0;
}

@media (max-width: 768px){
    h2{
        font-size: 150%;
    }
    
    h3{
        font-size: 125%;
    }
    
    p{
        font-size: 120%;
    }
    header{
        position: absolute;
    }
    #logo{
        margin: 15px 0 20 -25px;
        background: url(../img/RD_mobile.png) no-repeat center;
    }
    #menu-icon{
        display: inline-block;
    }
    
    nav ul, nav:active ul{
        display: none;
        z-index: 1000;
        position: absolute;
        padding: 20px;
        background: #6991ac;
        right: 20px;
        top: 60px;
        border: 1px solid #fff;
        border-radius: 2px 0 2px 0;
        width: 60%;
    }
    
    nav:hover ul{
        display: block;
    }
    
    nav li{
        text-align: center;
        width: 100%;
        padding: 10px 0;
    }
    
    .banner{
        padding-top: 86px;
    }
    
    .one-fourth{
        float: left;
        width: 100%;
    }
    
    .one-fourth i{
        font-size: 350%;
        padding: 4% 0 1% 0;
    }
    
    .one-third{
        width: 100%;
    }
    
    article{
        width: 100%;
    }
    
    aside{
        width: 100%;
    }
    
    .hand-mobile{
        display: none;
    }
    
    .social i{
        font-size: 180%;
        margin-left: 45px;
    }
}