Html 添加到样式表的其他样式会导致问题

我已经创建了一个网站，工作良好之前

现在我在style.css中添加了一些代码

这是我的原创风格。css：

@charset 'UTF-8';
@import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300italic,400italic');
@import url('font-awesome.min.css');

/*
    Astral by HTML5 UP
    html5up.net | @n33co
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/


/*********************************************************************************/
/* Basic                                                                         */
/*********************************************************************************/

    body
    {
        background-image:           url('images/overlay.png'),      url('images/bg.jpg');
        background-repeat:          repeat,                         no-repeat;
        background-size:            auto,                           100% 100%;
    }

        body.is-loading *
        {
            -moz-transition: none !important;
            -webkit-transition: none !important;
            -o-transition: none !important;
            -ms-transition: none !important;
            transition: none !important;
            -moz-animation: none !important;
            -webkit-animation: none !important;
            -o-animation: none !important;
            -ms-animation: none !important;
            animation: none !important;
        }

    body,input,textarea,select
    {
        font-family: 'Source Sans Pro', sans-serif;
        font-weight: 300;
        color: SVG; /*#777777;*/
    }

    strong, b
    {
        font-weight: 400;
        color: #363636;
    }

    h1, h2, h3, h4,h5, h6
    {
        font-weight: 400;
        color: #363636;
    }

    blockquote
    {
        border-left: solid 0.5em #ddd;
        padding: 1em 0 1em 2em;
        font-style: italic;
    }

    em, i
    {
        font-style: italic;
    }

    hr
    {
        border: 0;
        border-top: solid 1px #ddd;
        padding: 1.5em 0 0 0;
        margin: 1.75em 0 0 0;
    }

    sub
    {
        position: relative;
        top: 0.5em;
        font-size: 0.8em;
    }

    sup
    {
        position: relative;
        top: -0.5em;
        font-size: 0.8em;
    }

    br.clear
    {
        clear: both;
    }

    p, ul, ol, dl, table, blockquote, form
    {
        margin-bottom: 2em;
    }

    /* Table */

        table
        {
            width: 100%;
        }

            table.default
            {
            }

                table.default tbody tr
                {
                    border-bottom: solid 1px #f4f4f4;
                }

                table.default td
                {
                    padding: 0.5em 1em 0.5em 1em;
                }

                table.default th
                {
                    text-align: left;
                    font-weight: 400;
                    padding: 0.5em 1em 0.5em 1em;
                }

                table.default thead
                {
                    border-bottom: solid 2px #f4f4f4;
                }

    /* Form */

        form
        {
        }

            form label
            {
                display: block;
                font-weight: 400;
                color: #363636;
                margin: 0 0 1em 0;
            }

            form input[type="text"],
            form input[type="email"],
            form input[type="password"],
            form select,
            form textarea
            {
                -webkit-appearance: none;
                border: 0;
                background: #FFFFFF;
                padding: 0.75em;
                width: 100%;
                -moz-transition: background-color .25s ease-in-out;
                -webkit-transition: background-color .25s ease-in-out;
                -o-transition: background-color .25s ease-in-out;
                -ms-transition: background-color .25s ease-in-out;
                transition: background-color .25s ease-in-out;
            }

            form input[type="text"],
            form input[type="email"],
            form input[type="password"],
            form select
            {
                line-height: 1.35em;
            }

            form input[type="text"]:focus,
            form input[type="email"]:focus,
            form input[type="password"]:focus,
            form select:focus,
            form textarea:focus
            {
                background: #f8f8f8;
            }

            form ::-webkit-input-placeholder
            {
                color: #999;
            }

            form :-moz-placeholder
            {
                color: #999;
            }

            form ::-moz-placeholder
            {
                color: #999;
            }

            form :-ms-input-placeholder
            {
                color: #999;
            }       

    /* Section/Article */

        section,
        article
        {
            margin-bottom: 3em;
        }

            section > :last-child,
            article > :last-child
            {
                margin-bottom: 0;
            }

            section:last-child,
            article:last-child
            {
                margin-bottom: 0;
            }

        header
        {
        }

            header > p
            {
                color: #aaa;
            }

    /* Image */



    .codeboxspace
    {

    min-width:1000px;
    max-width:1400px;
    width:95%;
    display:none;
    }
    #codebox
          {
          font-family: "Courier 10 Pitch", Courier, monospace; 
          font-size: 90%;
          line-height: 140%;
          white-space: pre;
          white-space: pre-wrap;
          white-space: -moz-pre-wrap;
          white-space: -o-pre-wrap;
          background: #E0E0E0;
          display: block;
          padding: 0.5em 1em;
          border: 1px solid #bebab0;
          text-align:left;
          color:black;
          height : 100%;
          width:920px;
         } 

        .image
        {
            display: inline-block;
        }


            .image img
            {
                display: block;
                width: 100%;
            }

            .image.fit
            {
                display: block;
                width: 100%;
            }

            .image.featured
            {
                display: block;
                width: 100%;
                margin: 0 0 2em 0;
            }

            .image.left
            {
                float: left;
                margin: 0 2em 2em 0;
            }

            .image.centered
            {
                display: block;
                margin: 0 0 2em 0;
            }

                .image.centered img
                {
                    margin: 0 auto;
                    width: auto;
                }

    /* Button */    

        input[type="button"],
        input[type="submit"],
        input[type="reset"],
        .button
        {
            -webkit-appearance: none;
            display: inline-block;
            background-color: #222222;
            color: #FFFFFF;
            border: 0;
            cursor: pointer;
            outline: 0;
            -moz-transition: background-color .25s ease-in-out;
            -webkit-transition: background-color .25s ease-in-out;
            -o-transition: background-color .25s ease-in-out;
            -ms-transition: background-color .25s ease-in-out;
            transition: background-color .25s ease-in-out;
        }

            input[type="button"]:hover,
            input[type="submit"]:hover,
            input[type="reset"]:hover,
            .button:hover
            {
                background-color: #333333;
            }

            input[type="button"]:active,
            input[type="submit"]:active,
            input[type="reset"]:active,
            .button:active
            {
                background-color: #444444;
            }

            input[type="button"].alt,
            input[type="submit"].alt,
            input[type="reset"].alt,
            .button.alt
            {
                background-color: #777777;
            }

                input[type="button"].alt:hover,
                input[type="submit"].alt:hover,
                input[type="reset"].alt:hover,
                .button.alt:hover
                {
                    background-color: #888888;
                }

                input[type="button"].alt:active,
                input[type="submit"].alt:active,
                input[type="reset"].alt:active,
                .button.alt:active
                {
                    background-color: #999999;
                }

    /* List */

        ul.default
        {
            list-style: disc;
            padding-left: 1em;
        }

            ul.default li
            {
                padding-left: 0.5em;
            }

        ul.actions
        {
        }

            ul.actions li
            {
                display: inline-block;
                margin-left: 0.5em;
            }

                ul.actions li:first-child
                {
                    margin-left: 0;
                }

        ol.default
        {
            list-style: decimal;
            padding-left: 1.25em;
        }

            ol.default li
            {
                padding-left: 0.25em;
            }

/*********************************************************************************/
/* Icons                                                                         */
/*********************************************************************************/

    .icon {
        position: relative;
        text-decoration: none;
    }

        .icon:before {
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            font-family: FontAwesome;
            font-style: normal;
            font-weight: normal;
            text-transform: none !important;
        }

        .icon > .label {
            display: none;
        }

/*********************************************************************************/
/* Nav                                                                           */
/*********************************************************************************/

    #nav
    {
    }

        #nav a
        {
            position: relative;
            display: inline-block;
            color: #FFFFFF;
            width: 1em;
            height: 1em;
            line-height: 0.9em;
        }

            #nav a.icon:before
            {
                padding-right: 0;
            }

/*********************************************************************************/
/* Panels                                                                        */
/*********************************************************************************/

    #main
    {
        position: relative;

        overflow: hidden;
    }

    .panel
    {
        position: relative;
    }

    /* Me */

        #me
        {
        }

            #me .pic
            {
                position: relative;
                display: block;
            }

                #me .pic:before
                {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    background: url('images/overlay.png');
                    width: 100%;
                    height: 100%;
                    z-index: 1;
                }

/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/

    #footer
    {
        color: #ccc;
        color: rgba(255,255,255,0.45);
    }

        #footer a
        {
            color: #ddd;
            color: rgba(255,255,255,0.65);
            -moz-transition: color .25s ease-in-out;
            -webkit-transition: color .25s ease-in-out;
            -o-transition: color .25s ease-in-out;
            -ms-transition: color .25s ease-in-out;
            transition: color .25s ease-in-out;
        }

        #footer a:hover
        {
            color: rgba(255,255,255,1.0);
        }

        #footer .copyright
        {
        }

            #footer .copyright li
            {
                display: inline-block;
            }

                #footer .copyright li:before
                {
                    display: inline;
                    content: '\2022';
                    opacity: 0.5;
                    padding: 0 0.75em 0 0.75em;
                }

                #footer .copyright li:first-child:before
                {
                    display: none;
                }



#skill { 
    list-style: none;
    font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    width: 296px;
    margin: 50px auto 0;
    position: relative;
    line-height: 2em;
    padding: 30px 0;
}

#skill li { 
    margin-bottom:50px; 
    background:#e9e5e2;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e1ddd9), to(#e9e5e2));
    background-image: -webkit-linear-gradient(top, #e1ddd9, #e9e5e2);
    background-image: -moz-linear-gradient(top, #e1ddd9, #e9e5e2);
    background-image: -ms-linear-gradient(top, #e1ddd9, #e9e5e2);
    background-image: -o-linear-gradient(top, #e1ddd9, #e9e5e2);
    background-image: linear-gradient(top, #e1ddd9, #e9e5e2);  
    height:20px; 
    border-radius:10px; 
    -moz-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;   
    -webkit-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;    
    box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;     
}

#skill li h3 { 
    position:relative; 
    top:-25px;
}

.bar { 
    height:18px; 
    margin:1px 2px;  
    position:absolute;
    border-radius:10px;
    -moz-box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
    -webkit-box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;    
    box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;       
}

.unity {
    width:80%; 
    -moz-animation:unity 2s ease-out;
    -webkit-animation:unity 2s ease-out;
    background-color: #FF0000;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#FF0000));
    background-image: -webkit-linear-gradient(top, #FF0000, #FF0000);
    background-image: -moz-linear-gradient(top, #FF0000, #FF0000);
    background-image: -ms-linear-gradient(top, #FF0000, #FF0000);
    background-image: -o-linear-gradient(top, #FF0000, #FF0000);
    background-image: linear-gradient(top, #FF0000, #FF0000);
}

.html-css {
    width:50%;
    -moz-animation:html-css 2s ease-out;
    -webkit-animation:html-css 2s ease-out;
    background-color: #FF8000;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FF8000), to(#FF8000));
    background-image: -webkit-linear-gradient(top, #FF8000, #FF8000);
    background-image: -moz-linear-gradient(top, #FF8000, #FF8000);
    background-image: -ms-linear-gradient(top, #FF8000, #FF8000);
    background-image: -o-linear-gradient(top, #FF8000, #FF8000);
    background-image: linear-gradient(top, #FF8000, #FF8000);
}

.testing {
    width:20%;
    -moz-animation:testing 2s ease-out;
    -webkit-animation:testing 2s ease-out;
    background-color: #192AFF;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#192AFF), to(#192AFF));
    background-image: -webkit-linear-gradient(top, #192AFF, #192AFF);
    background-image: -moz-linear-gradient(top, #192AFF, #192AFF);
    background-image: -ms-linear-gradient(top, #192AFF, #192AFF);
    background-image: -o-linear-gradient(top, #192AFF, #192AFF);
    background-image: linear-gradient(top, #192AFF, #192AFF);
}

@-moz-keyframes unity       {0%  { width:0px;} 100%{ width:100%;}  }
@-moz-keyframes html-css    { 0%  { width:0px;} 100%{ width:100%;}  }
@-moz-keyframes testing         { 0%  { width:0px;} 100%{ width:100%;}  }

@-webkit-keyframes unity       { 0%  { width:0px;} 100%{ width:80%;}  }
@-webkit-keyframes html-css        { 0%  { width:0px;} 100%{ width:50%;}  }
@-webkit-keyframes testing       { 0%  { width:0px;} 100%{ width:20%;}  }

当我使用上面的代码时，我的网页是这样的，它也需要这样：

但是我在style.css文件的底部添加了以下代码：

div.container {
    margin: 50px auto;
    width: 675px;
}
div.image {
    position: relative;
    overflow: hidden;
    width: 150px;
    height: 150px;
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 15px;
    box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.3);
}
img {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
span.title {
    width: 150px;
    height: 20px;
    position: absolute;
    background: rgba(30, 30, 30, 0.9);
    text-align: center;
    padding: 5px 0 4px;
    font-size: 14px;
    color: white;
    font-family:"Lucida Sans", "Trebuchet MS", Arial, sans-serif;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
div.image.revealUpFull span {
    height: 141px;
    width: 150px;
    bottom: -120px;
    display: block;
}
div.image.revealUpFull span a {
    display: block;
    height: 100%;
    width: 100%;
    color: white;
}
div.image.revealUpFull:hover img {
    top: -150px;
}
div.image.revealUpFull:hover span {
    bottom: 0px;
}

但这一切看起来都是这样的，这不是它应该是什么样子：

---

请帮助我找出如何使页面按应有的方式显示。

欢迎使用堆栈溢出！我已经格式化了你的问题，删除了一些拼写和语法错误，并将你的标题改得更具描述性。如果你能详细说明你所看到的问题，那将非常有帮助。对于回答者来说，尝试在两个图像之间切换非常耗时。如果您可以通过查找导致问题的代码来减少代码量，那么它也可能会对您有所帮助。有关更多信息，请参阅。删除您添加的代码…然后一次添加一个块，直到不希望发生的事情发生。