[Solved] the inner java script is override the css property on this html code

by 


                                                                                      
     function myFunction(){                    
                      document.getElementById("bad").style.display="block";
                              }
         
    #good{
        width: 100%;
        height: 100%;
    }
    #bad{
        position:absolute;
        width: 15%;
        height: 100%;
        background-color: #023b3b;
        top:0%;
        display: none; 
    }
    #vahid{
        float: left;
        width: 7%;
        height: 100%;
        background-color: #023b3b;
    }
    #isnani{
        float: left;
        width: 93%;
        height: 100%;
        background-color: bisque;
    }
    #one {
      display:block;
      background-color: #023b3b;
       /* width:60px;
        height: 867px;*/
    }
    #boom{
        margin-top: 30%;
        height: 5%;
        width: 35%;
        float: left;
        padding-left: 20px;


    }
    .local img {
        height: 2.5%;
        width:30%;
        margin :10px 0px 10px 20px;
    }

    /*isnani starts here*/
    #third{  float:left;
        width:100%;
         height: 15%;
        border-color:white; 
    border-style : solid;
    background-color : white;

    }
    .fourth{
        margin-left: 2%;
        margin-top: 5%;
        font-family: sans-serif;

    }
    .fifth{
        color: #808080;
        font-size: 80%;
        font-weight: 800;
        font-family: arial,sans-serif;
        margin-left: 1%;

    }
    #sixth{
         font-family: sans-serif;
         font-size:150%;
        color:#666666;
        margin-top: 4%;
        margin-left: 2%;
        /*top: -2%;/
       /* line-height: 3%; */


    }
    #seventh{
        position: absolute;
         top: 11%;
        color: #808080;
        font-family: sans-serif;
        font-size: 80%;
        margin-left: 1.8%;
        margin-top: 1.5%;

        /*line-height: 3%;*/

    }
    #fort{
        float: right;
        margin-top: -65px;
        margin-right: 80px;
    }

    #button{
        margin-left: 80%;
        width: 20%;
        hyphens: 20%;
    }
    .icon{
            color :red;
            background-color:yellow;}
 
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="https://stackoverflow.com/questions/38966624/rise.css">
                      <link rel="stylesheet"       href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
          
        </head>
        <body>
            <div id="good">
                <div id="vahid">
                    <div id="one">

                                                                                        
                        <img src="image1.jpg" id="boom"><br><br><br><br><br>
                        <!--button-->
                        <i class="icon fa fa-anchor"  onclick="myFunction()"  id="button"></i>
                       <!-- <img src="button.jpg" onclick="myFunction()"  id="button">--><br><br><br><br>
                        <!--icons-->
                            <span class="local">
                                <img src="img.jpg">
                                <img src="img1.jpg">
                                <img src="img2.jpg">
                                <img src="img3.jpg">
                            </span><br><br><br><br>
                            <span class="local">
                                <img src="img4.jpg">
                                <img src="img5.jpg">
                                <img src="img6.jpg">
                                <img src="img7.jpg">
                            </span>
                    </div>
                </div>
                <div id="isnani">
                     <div id="third">
                        <p >
                            <span class="fourth">Dashboard</span>      
                            <span class="fifth">  + New</span>
                        </p>
                        <!--<p class="fourth">&nbsp;</p>
                        <p id="fort"><input type="text" placeholder="search your project here..." ></p>
                        <div id="jump"><img  src="search.jpg" height="20px" width="10px"></div>-->

                        <p id="sixth">    Welcome to Flatkit</p>
                        <p id="seventh"> Bootstrap 4 Web App Kit With Angular js</p>
                        

                    </div>
                </div>
            </div>
            <div id="bad">
            </div>
        </body>
    </html>

solved the inner java script is override the css property on this html code