How to fix horizontal bar chart? chart is going thru whole page

How to fix horizontal bar chart? chart is going thru whole page
0

#1

Hi Coders,

<!DOCTYPE html>
<html class="no-js"> 
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/style.css">
    </head>
    <body>
        <img class="NS" src="/img/NS.jpg" alt="Nancy">

        <ul class="nav">

            <li><a href="Home">Home</a> </li>
            <li><a href="Skills">Skills</a> </li>
            <li><a href="Portfolio">Portfolio</a> </li>
            <li><a href="About me">About me</a> </li>
            <li><a href="Contact me">Contact me</a> </li>
        </ul>

        <section class="banner">
                <h1>
                    Hi, I am <span> Nancy Solcanyi </span>
                </h1>
                <h2>
                    I'm Full-stack Web Developer
                </h2>
                <img class="imgclass" src="/img/heropicture.jpg" alt="">
        </section>

        <section class="section1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa perferendis non officia voluptatibus nisi consequuntur nobis voluptatum accusamus, cum nam reprehenderit esse recusandae quasi a obcaecati optio possimus odio maiores.
            </p>
        </section>

        
        <section class="row">
                <div class="column">
                <h2> Lorem</h2>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum numquam vel quod quam perspiciatis distinctio harum voluptatum tempora sint itaque rem ducimus iste et obcaecati fugit architecto, nulla aliquid! Numquam.</p>
                </div>   
                <div class="column"> 
                <h2> Lorem </h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus reprehenderit, ea veritatis dolor ut nihil magnam similique beatae excepturi perferendis in suscipit aliquid quaerat autem aliquam id nesciunt maxime velit?</p>
                </div>   
                <div class="column">
                <h2> Lorem </h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut laboriosam recusandae in itaque, aliquam tenetur, a error culpa, ab eveniet mollitia neque nam voluptatum modi magnam minima placeat aliquid doloribus.</p>
                </div>
                <div class="column">    
                <h2> Lorem</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora earum laborum deleniti enim corporis dolorum doloremque quidem cumque molestias ullam. Adipisci doloremque quam eius reprehenderit doloribus animi iusto porro tempore!</p>
                </div>    
        </section>
        
        <section class="myskills">
        <h2>My Skills</h2>
        </section>

       <section class="center">
                
                <div class="skillbox">
                    <p>Html</p>
                    <p>80%</p>
                    <div class="skill"> 
                        <div class="skill_level" style="width:80%"></div>                        
                    </div>
                </div>
                <div class="skillbox">
                        <p>CSS. Sass</p>
                        <p>80%</p>
                        <div class="skill"> 
                            <div class="skill_level" style="width:80%"></div>                        
                        </div>
                </div>
                <div class="skillbox">
                        <p>JavaScript</p>
                        <p>70%</p>
                        <div class="skill"> 
                            <div class="skill_level"style="width:70%"></div>                        
                        </div>
                </div>
                <div class="skillbox">
                        <p>React</p>
                        <p>60%</p>
                        <div class="skill"> 
                            <div class="skill_level" style="width:60%"></div>                        
                        </div>
                </div>
                <div class="skillbox">
                        <p>jQuery</p>
                        <p>70%</p>
                        <div class="skill"> 
                            <div class="skill_level" style="width:70%"></div>                        
                        </div>
                </div>
                <div class="skillbox">
                        <p>PHP</p>
                        <p>60%</p>
                        <div class="skill"> 
                            <div class="skill_level" style="width:60%"></div>                        
                        </div>
                </div>
                <div class="skillbox">
                        <p>Laravel</p>
                        <p>60%</p>
                        <div class="skill"> 
                            <div class="skill_level"style="width:60%"></div>                        
                        </div>
                </div>
                <div class="skillbox">
                        <p>UX</p>
                        <p>50%</p>
                        <div class="skill"> 
                            <div class="skill_level"style="width:60%"></div>                        
                        </div>
                </div>
        </section>
        
        
        <section class="portfolio">
            <h2>Portfolio</h2>
        </section>
        <div class="imgrow">
        
            <div class="imgcolumn"><img src="/img/productivity.jpg" alt=""></div>
            <div class="imgcolumn" ><img src="/img/productivity.jpg" alt=""></div>
            <div class="imgcolumn"><img src="/img/productivity.jpg" alt=""></div>
            <div class="imgcolumn"><img src="/img/productivity.jpg" alt=""></div>
            <div class="imgcolumn"><img src="/img/productivity.jpg" alt=""></div>
            <div class="imgcolumn"><img src="/img/productivity.jpg" alt=""></div>
        </div>
   
        <section>
            <h2 class="aboutme">About me</h2>
            <div class="rightcolumn">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis odio sed quis possimus, facilis unde tempora suscipit quisquam inventore voluptate adipisci delectus quos eum aspernatur ducimus architecto aliquam distinctio officia.</p>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, asperiores. In facere iste dolore sed, similique deleniti rem laudantium repudiandae recusandae eum, quo, qui cupiditate! Molestiae explicabo aspernatur exercitationem excepturi.</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti consequatur sapiente hic repellendus? Atque nostrum ipsum, earum eaque sed aliquid! Adipisci cumque consequatur quas eos natus nemo! Alias, illum ea.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias reprehenderit commodi laborum veritatis nostrum ducimus magni. Iste architecto labore beatae sunt adipisci perspiciatis autem accusantium harum. Quas voluptatum atque magni!</p>

                <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>

                 <button type="button">Contact me</button>
            </div>

            <div>
                <img class="imgNancy" src="/img/Nancy.jpg" alt="">
            </div>
        </section>

        <section class="contactme">
            <h2>Contact me</h2>
            <div><img src="img/contact form.jpg" alt=""> </div>

            
        <h2>Find me here</h2>
          
        



        </section>



        
    </body>
</html>
css:
body{font-family: 'Times New Roman', Times, serif;
     font-size: 18px;
}

.movedown{
    position: absolute;
    display: flex;
    top:150em;
}




.myskills,.portfolio,.aboutme {

     background-color: #336F97;
     color:#E7E5DC;
     list-style: none;
     text-align: center;
     padding: 5px;
     margin: 10px;
 }
.NS{
    position: absolute;
    margin-left: 15em;
    top: 1em;
}

.nav{
    background-color: #336F97;
    color:#E7E5DC;
    list-style: none;
    text-align: center;
    padding: 20px ;
    
}

.nav > li {
    display: inline-block;
    padding-right: 50px;
}

.nav > li > a{
    text-decoration: none;
    color:#E7E5DC;
}

.banner{
    text-align: center;
}

h1 > span{
     text-decoration: underline;
     color:#CE362F;
}

.column {
    float: right;
    width: 20%;
    padding: 40px;
    padding-top: 100px;
    height: 200px; 
    background-color: #336F97;
    color: #E7E5DC;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}


.center{
    width: 50%;
    position: absolute;
    top: 170%;
    left: 55%;
    transform: translate( -50%, -50%);
    padding:0px; 
    margin: 0px;  
    background:none;
    
    color: black;
}

.skillbox{

    width: 60%px;
    margin: 30px 0;
}

.skillbox p{
    color: #37100D;
    text-transform: uppercase;
    margin: 0 0 10px; 
    padding: 0;
    font-weight: bold;
    letter-spacing:1px;
}

.skillbox p:nth-child(2){
    float: right;
    position: relative;
    top:-25px;
}

.skill{
    background: #7C9DB6;
    padding: 1px;

    border: 1px solid #336F97;
    border-radius: 2px;
}

.skill_level{
    background: #336F97;
    width: 100%;
    height: 20px;
}


.imgcolumn {
    float: left;
    width: 30%;
    padding: 15px;
    height: 300px; 
    background-color: #336F97;
    color: #E7E5DC;
}

.imgrow:after {
    content: "";
    display: table;
    clear: both;
}

.rightcolumn{
    margin-left: 50em;
    margin-right: 20em;
}

.imgNancy{
    position: absolute;
    display: flex;
    margin-left: 22em;
    top: 113em;
}
button{
    background: #336F97;
    border-radius: 16px;
    color: white;
    padding: 10px 24px;
    text-align: center;
    font-size: 15px;
    width: 150px;
    margin-left: 15em;
}

.contactme{
    background-color: #336F97;
    color:#E7E5DC;
    list-style: none;
    text-align: center;
    padding: 20px ;
    margin: 100px;
}

can someone tell what I did all wrong with my code?
the bar chart is at the same position as other properties.
cannot spread the h2 bar[quote=“neneh138, post:1, topic:224957, full:true”]
Hi Coders,

<!DOCTYPE html>
<html class="no-js"> 
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/style.css">
    </head>
    <body>
        <img class="NS" src="/img/NS.jpg" alt="Nancy">

        <ul class="nav">

            <li><a href="Home">Home</a> </li>
            <li><a href="Skills">Skills</a> </li>
            <li><a href="Portfolio">Portfolio</a> </li>
            <li><a href="About me">About me</a> </li>
            <li><a href="Contact me">Contact me</a> </li>
        </ul>

        <section class="banner">
                <h1>
                    Hi, I am <span> Nancy Solcanyi </span>
                </h1>
                <h2>
                    I'm Full-stack Web Developer
                </h2>
                <img class="imgclass" src="/img/heropicture.jpg" alt="">
        </section>

        <section class="section1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa perferendis non officia voluptatibus nisi consequuntur nobis voluptatum accusamus, cum nam reprehenderit esse recusandae quasi a obcaecati optio possimus odio maiores.
            </p>
        </section>

        
        <section class="row">
                <div class="column">
                <h2> Lorem</h2>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum numquam vel quod quam perspiciatis distinctio harum voluptatum tempora sint itaque rem ducimus iste et obcaecati fugit architecto, nulla aliquid! Numquam.</p>
                </div>   
                <div class="column"> 
                <h2> Lorem </h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus reprehenderit, ea veritatis dolor ut nihil magnam similique beatae excepturi perferendis in suscipit aliquid quaerat autem aliquam id nesciunt maxime velit?</p>
                </div>   
                <div class="column">
                <h2> Lorem </h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut laboriosam recusandae in itaque, aliquam tenetur, a error culpa, ab eveniet mollitia neque nam voluptatum modi magnam minima placeat aliquid doloribus.</p>
                </div>
                <div class="column">    
                <h2> Lorem</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora earum laborum deleniti enim corporis dolorum doloremque quidem cumque molestias ullam. Adipisci doloremque quam eius reprehenderit doloribus animi iusto porro tempore!</p>
                </div>    
        </section>
        
        <section class="myskills">
        <h2>My Skills</h2>
        </section>

       <section class="center">
                
                <div class="skillbox">
                    <p>Html</p>
                    <p>80%</p>
                    <div class="skill"> 
                        <div class="skill_level" style="width:80%"></div>                        
                    </div>
                </div>
                <div class="skillbox">
                        <p>CSS. Sass</p>
                        <p>80%</p>
                        <div class="skill"> 
                            <div class="skill_level" style="width:80%"></div>                        
                        </div>
                </div>
                <div class="skillbox">
                        <p>JavaScript</p>
                        <p>70%</p>
                        <div class="skill"> 
                            <div class="skill_level"style="width:70%"></div>                        
                        </div>
                </div>
                <div class="skillbox">
                        <p>React</p>
                        <p>60%</p>
                        <div class="skill"> 
                            <div class="skill_level" style="width:60%"></div>                        
                        </div>
                </div>
                <div class="skillbox">
                        <p>jQuery</p>
                        <p>70%</p>
                        <div class="skill"> 
                            <div class="skill_level" style="width:70%"></div>                        
                        </div>
                </div>
                <div class="skillbox">
                        <p>PHP</p>
                        <p>60%</p>
                        <div class="skill"> 
                            <div class="skill_level" style="width:60%"></div>                        
                        </div>
                </div>
                <div class="skillbox">
                        <p>Laravel</p>
                        <p>60%</p>
                        <div class="skill"> 
                            <div class="skill_level"style="width:60%"></div>                        
                        </div>
                </div>
                <div class="skillbox">
                        <p>UX</p>
                        <p>50%</p>
                        <div class="skill"> 
                            <div class="skill_level"style="width:60%"></div>                        
                        </div>
                </div>
        </section>
        
        
        <section class="portfolio">
            <h2>Portfolio</h2>
        </section>
        <div class="imgrow">
        
            <div class="imgcolumn"><img src="/img/productivity.jpg" alt=""></div>
            <div class="imgcolumn" ><img src="/img/productivity.jpg" alt=""></div>
            <div class="imgcolumn"><img src="/img/productivity.jpg" alt=""></div>
            <div class="imgcolumn"><img src="/img/productivity.jpg" alt=""></div>
            <div class="imgcolumn"><img src="/img/productivity.jpg" alt=""></div>
            <div class="imgcolumn"><img src="/img/productivity.jpg" alt=""></div>
        </div>
   
        <section>
            <h2 class="aboutme">About me</h2>
            <div class="rightcolumn">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis odio sed quis possimus, facilis unde tempora suscipit quisquam inventore voluptate adipisci delectus quos eum aspernatur ducimus architecto aliquam distinctio officia.</p>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, asperiores. In facere iste dolore sed, similique deleniti rem laudantium repudiandae recusandae eum, quo, qui cupiditate! Molestiae explicabo aspernatur exercitationem excepturi.</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti consequatur sapiente hic repellendus? Atque nostrum ipsum, earum eaque sed aliquid! Adipisci cumque consequatur quas eos natus nemo! Alias, illum ea.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias reprehenderit commodi laborum veritatis nostrum ducimus magni. Iste architecto labore beatae sunt adipisci perspiciatis autem accusantium harum. Quas voluptatum atque magni!</p>

                <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>

                 <button type="button">Contact me</button>
            </div>

            <div>
                <img class="imgNancy" src="/img/Nancy.jpg" alt="">
            </div>
        </section>

        <section class="contactme">
            <h2>Contact me</h2>
            <div><img src="img/contact form.jpg" alt=""> </div>

            
        <h2>Find me here</h2>
          
        



        </section>



        
    </body>
</html>
css:
body{font-family: 'Times New Roman', Times, serif;
     font-size: 18px;
}

.movedown{
    position: absolute;
    display: flex;
    top:150em;
}




.myskills,.portfolio,.aboutme {

     background-color: #336F97;
     color:#E7E5DC;
     list-style: none;
     text-align: center;
     padding: 5px;
     margin: 10px;
 }
.NS{
    position: absolute;
    margin-left: 15em;
    top: 1em;
}

.nav{
    background-color: #336F97;
    color:#E7E5DC;
    list-style: none;
    text-align: center;
    padding: 20px ;
    
}

.nav > li {
    display: inline-block;
    padding-right: 50px;
}

.nav > li > a{
    text-decoration: none;
    color:#E7E5DC;
}

.banner{
    text-align: center;
}

h1 > span{
     text-decoration: underline;
     color:#CE362F;
}

.column {
    float: right;
    width: 20%;
    padding: 40px;
    padding-top: 100px;
    height: 200px; 
    background-color: #336F97;
    color: #E7E5DC;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}


.center{
    width: 50%;
    position: absolute;
    top: 170%;
    left: 55%;
    transform: translate( -50%, -50%);
    padding:0px; 
    margin: 0px;  
    background:none;
    
    color: black;
}

.skillbox{

    width: 60%px;
    margin: 30px 0;
}

.skillbox p{
    color: #37100D;
    text-transform: uppercase;
    margin: 0 0 10px; 
    padding: 0;
    font-weight: bold;
    letter-spacing:1px;
}

.skillbox p:nth-child(2){
    float: right;
    position: relative;
    top:-25px;
}

.skill{
    background: #7C9DB6;
    padding: 1px;

    border: 1px solid #336F97;
    border-radius: 2px;
}

.skill_level{
    background: #336F97;
    width: 100%;
    height: 20px;
}


.imgcolumn {
    float: left;
    width: 30%;
    padding: 15px;
    height: 300px; 
    background-color: #336F97;
    color: #E7E5DC;
}

.imgrow:after {
    content: "";
    display: table;
    clear: both;
}

.rightcolumn{
    margin-left: 50em;
    margin-right: 20em;
}

.imgNancy{
    position: absolute;
    display: flex;
    margin-left: 22em;
    top: 113em;
}
button{
    background: #336F97;
    border-radius: 16px;
    color: white;
    padding: 10px 24px;
    text-align: center;
    font-size: 15px;
    width: 150px;
    margin-left: 15em;
}

.contactme{
    background-color: #336F97;
    color:#E7E5DC;
    list-style: none;
    text-align: center;
    padding: 20px ;
    margin: 100px;
}

can someone tell what I did all wrong with my code?
the bar chart is at the same position as other properties.
cannot spread the h2 bar
[/quote]

`[quote="neneh138, post:1, topic:224957, full:true"]
Hi Coders, 





Nancy
    <ul class="nav">

        <li><a href="Home">Home</a> </li>
        <li><a href="Skills">Skills</a> </li>
        <li><a href="Portfolio">Portfolio</a> </li>
        <li><a href="About me">About me</a> </li>
        <li><a href="Contact me">Contact me</a> </li>
    </ul>

    <section class="banner">
            <h1>
                Hi, I am <span> Nancy Solcanyi </span>
            </h1>
            <h2>
                I'm Full-stack Web Developer
            </h2>
            <img class="imgclass" src="/img/heropicture.jpg" alt="">
    </section>

    <section class="section1">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa perferendis non officia voluptatibus nisi consequuntur nobis voluptatum accusamus, cum nam reprehenderit esse recusandae quasi a obcaecati optio possimus odio maiores.
        </p>
    </section>

    
    <section class="row">
            <div class="column">
            <h2> Lorem</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum numquam vel quod quam perspiciatis distinctio harum voluptatum tempora sint itaque rem ducimus iste et obcaecati fugit architecto, nulla aliquid! Numquam.</p>
            </div>   
            <div class="column"> 
            <h2> Lorem </h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus reprehenderit, ea veritatis dolor ut nihil magnam similique beatae excepturi perferendis in suscipit aliquid quaerat autem aliquam id nesciunt maxime velit?</p>
            </div>   
            <div class="column">
            <h2> Lorem </h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut laboriosam recusandae in itaque, aliquam tenetur, a error culpa, ab eveniet mollitia neque nam voluptatum modi magnam minima placeat aliquid doloribus.</p>
            </div>
            <div class="column">    
            <h2> Lorem</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora earum laborum deleniti enim corporis dolorum doloremque quidem cumque molestias ullam. Adipisci doloremque quam eius reprehenderit doloribus animi iusto porro tempore!</p>
            </div>    
    </section>
    
    <section class="myskills">
    <h2>My Skills</h2>
    </section>

   <section class="center">
            
            <div class="skillbox">
                <p>Html</p>
                <p>80%</p>
                <div class="skill"> 
                    <div class="skill_level" style="width:80%"></div>                        
                </div>
            </div>
            <div class="skillbox">
                    <p>CSS. Sass</p>
                    <p>80%</p>
                    <div class="skill"> 
                        <div class="skill_level" style="width:80%"></div>                        
                    </div>
            </div>
            <div class="skillbox">
                    <p>JavaScript</p>
                    <p>70%</p>
                    <div class="skill"> 
                        <div class="skill_level"style="width:70%"></div>                        
                    </div>
            </div>
            <div class="skillbox">
                    <p>React</p>
                    <p>60%</p>
                    <div class="skill"> 
                        <div class="skill_level" style="width:60%"></div>                        
                    </div>
            </div>
            <div class="skillbox">
                    <p>jQuery</p>
                    <p>70%</p>
                    <div class="skill"> 
                        <div class="skill_level" style="width:70%"></div>                        
                    </div>
            </div>
            <div class="skillbox">
                    <p>PHP</p>
                    <p>60%</p>
                    <div class="skill"> 
                        <div class="skill_level" style="width:60%"></div>                        
                    </div>
            </div>
            <div class="skillbox">
                    <p>Laravel</p>
                    <p>60%</p>
                    <div class="skill"> 
                        <div class="skill_level"style="width:60%"></div>                        
                    </div>
            </div>
            <div class="skillbox">
                    <p>UX</p>
                    <p>50%</p>
                    <div class="skill"> 
                        <div class="skill_level"style="width:60%"></div>                        
                    </div>
            </div>
    </section>
    
    
    <section class="portfolio">
        <h2>Portfolio</h2>
    </section>
    <div class="imgrow">
    
        <div class="imgcolumn"><img src="/img/productivity.jpg" alt=""></div>
        <div class="imgcolumn" ><img src="/img/productivity.jpg" alt=""></div>
        <div class="imgcolumn"><img src="/img/productivity.jpg" alt=""></div>
        <div class="imgcolumn"><img src="/img/productivity.jpg" alt=""></div>
        <div class="imgcolumn"><img src="/img/productivity.jpg" alt=""></div>
        <div class="imgcolumn"><img src="/img/productivity.jpg" alt=""></div>
    </div>

    <section>
        <h2 class="aboutme">About me</h2>
        <div class="rightcolumn">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis odio sed quis possimus, facilis unde tempora suscipit quisquam inventore voluptate adipisci delectus quos eum aspernatur ducimus architecto aliquam distinctio officia.</p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, asperiores. In facere iste dolore sed, similique deleniti rem laudantium repudiandae recusandae eum, quo, qui cupiditate! Molestiae explicabo aspernatur exercitationem excepturi.</p>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti consequatur sapiente hic repellendus? Atque nostrum ipsum, earum eaque sed aliquid! Adipisci cumque consequatur quas eos natus nemo! Alias, illum ea.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias reprehenderit commodi laborum veritatis nostrum ducimus magni. Iste architecto labore beatae sunt adipisci perspiciatis autem accusantium harum. Quas voluptatum atque magni!</p>

            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>

             <button type="button">Contact me</button>
        </div>

        <div>
            <img class="imgNancy" src="/img/Nancy.jpg" alt="">
        </div>
    </section>

    <section class="contactme">
        <h2>Contact me</h2>
        <div><img src="img/contact form.jpg" alt=""> </div>

        
    <h2>Find me here</h2>
      
    



    </section>



    
</body>
css: body{font-family: 'Times New Roman', Times, serif; font-size: 18px; }

.movedown{
position: absolute;
display: flex;
top:150em;
}

.myskills,.portfolio,.aboutme {

 background-color: #336F97;
 color:#E7E5DC;
 list-style: none;
 text-align: center;
 padding: 5px;
 margin: 10px;

}
.NS{
position: absolute;
margin-left: 15em;
top: 1em;
}

.nav{
background-color: #336F97;
color:#E7E5DC;
list-style: none;
text-align: center;
padding: 20px ;

}

.nav > li {
display: inline-block;
padding-right: 50px;
}

.nav > li > a{
text-decoration: none;
color:#E7E5DC;
}

.banner{
text-align: center;
}

h1 > span{
text-decoration: underline;
color:#CE362F;
}

.column {
float: right;
width: 20%;
padding: 40px;
padding-top: 100px;
height: 200px;
background-color: #336F97;
color: #E7E5DC;
}

.row:after {
content: “”;
display: table;
clear: both;
}

.center{
width: 50%;
position: absolute;
top: 170%;
left: 55%;
transform: translate( -50%, -50%);
padding:0px;
margin: 0px;
background:none;

color: black;

}

.skillbox{

width: 60%px;
margin: 30px 0;

}

.skillbox p{
color: #37100D;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing:1px;
}

.skillbox p:nth-child(2){
float: right;
position: relative;
top:-25px;
}

.skill{
background: #7C9DB6;
padding: 1px;

border: 1px solid #336F97;
border-radius: 2px;

}

.skill_level{
background: #336F97;
width: 100%;
height: 20px;
}

.imgcolumn {
float: left;
width: 30%;
padding: 15px;
height: 300px;
background-color: #336F97;
color: #E7E5DC;
}

.imgrow:after {
content: “”;
display: table;
clear: both;
}

.rightcolumn{
margin-left: 50em;
margin-right: 20em;
}

.imgNancy{
position: absolute;
display: flex;
margin-left: 22em;
top: 113em;
}
button{
background: #336F97;
border-radius: 16px;
color: white;
padding: 10px 24px;
text-align: center;
font-size: 15px;
width: 150px;
margin-left: 15em;
}

.contactme{
background-color: #336F97;
color:#E7E5DC;
list-style: none;
text-align: center;
padding: 20px ;
margin: 100px;
}

can someone tell what I did all wrong with my code?
the bar chart is at the same position as other properties. 
cannot spread  the background bar color, from end to end
[/quote]

`

#2

Can you please provide a link to the webpage .