White Bar on top of Webpage + Inherited CSS Property Override

user_18225668 0
Viewed 33

Hello fine people of stack overflow, once again I am asking for you help. I'm having issues with getting rid of the white bar above the top of my navigation. As shown in the image below: Picture of the problem I'm also having issues with getting "My Projects" text to show up because it's inherited the css from its parent, I don't know how to override it so I can make it white. I appreciate any help I can get.

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --ff-primary:'Overpass Mono', monospace;
    --ff-secondary:'Source Code Pro', monospace;

    --fw-reg: 300;
    --fw-bold: 900;

    --clr-bg: #fff;
    --clr-dark: #0d2e1e;
    --clr-accent: #98ec98bd;

    --fs-h1: 3rem;
    --fs-h2: 2.25rem;
    --fs-body: 1rem;
    
    --bs: 0.25em 0.25em 0.75em rgba(0,0,0,.25), 0.125em 0.125em 0.25em rgba(0,0,0,.15); 
}



body {
    background: var(--clr-light);
    color: var(--clr-dark);
    margin: 0;
    font-family: var(--ff-primary);
    font-size: var(--fs-body);
    line-height: 1.6;
}
section {
    padding: 5 em 2em;
}
img {
    display: block;
    max-width: 100%;
}

h1 h2 h3 {
    line-height: 1;
    margin: 0; 
  
}
h1 {
   font-size: var(--fs-h1) ; 
}
h2 {
    font-size: var(--fs-h2);
}
h3 {
    font-size: var(--fs-h3)
}

.section__title {
    margin-bottom: .25em;
}
.section__title--intro {
    font-weight: var(--fw-reg);
}
.section__subtitle {
    margin: 0;
    font-size: var(--fs-h3)
}
.section__subtitle--intro,
.section__subtitle--about {
    background: var(--clr-accent);
    /*background-color: lightblue;*/
    padding: .25em 1em;
    font-family: var(--ff-secondary);
    margin-bottom: 1em;
}
.section__subtitle--work {
    color: white;
    font-weight: var(--fw-bold);
    margin-bottom: 2em;
}
.intro {
    position: relative;
}
header {
    background-color: var(--clr-dark);
    /*display:inline;
    flex-direction: row;
    justify-content: space-between;
    padding: 1 em;
    */
}
.nav {
    color: var(--clr-light);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.nav a {
    color:white;
    text-decoration: none;
}
.nav li {
    list-style: none;
    display:flex;
    justify-content: space-evenly;
}

.intro__img {
    box-shadow: var(--bs);
}
.section__subtitle--intro {
    display:inline-block; 
}
.about-me__img {
    box-shadow: var(--bs);
}
.my-work {
    background-color: var(--clr-dark);
    color: var(--clr-light);
    text-align: center;
}
.portfolio {
    display: flex;
    margin: 0 auto;
    padding: 5px;
    
}
.container {
    display:flex;
}
.portfolio_item {
    background: var(--clr-accent);
    overflow:hidden;
}
.portfolio__img {
    /*width: 100%*/
    
    width: 250px; height: 250px;
    transition: 
        transform 750ms cubic-bezier(.5, 0, .5,1),
        opacity 250ms linear;
}
.portfolio__img:hover,
.portfolio_item:focus .portfolio__img {
    transform: scale(1.2);
    opacity: .75;
}

@media (min-width: 350px) {
    .footer {
        background: #111;
        color: whitesmoke;
        text-align: center;
        padding: 2.5em 0; 
        font-size: var(--fs-h3);
    }
    .footer a {
        color: inherit;
        text-decoration: none;
    }
    .footer__link {
        font-weight: var(--fw-bold);
    }
    
    .footer__link:hover,
    .social-list__link:hover {
        opacity: .7;
    }
    .footer__link:hover {
        text-decoration: underline;
    }
    ul {
        list-style-type: none;
    }

@media (min-width: 600px) {
    .intro {
        display: grid;
        width: min-content;
        margin: 0 auto;
        grid-column-gap: 1em;
        grid-template-areas:
        "img title"
        "img subtitle";
        grid-template-columns: min-content max-content;
    }
    .intro__img {
        grid-area: img;
        min-width: 250px;
        position: relative;
        z-index: 2;
    }

    .section__subtitle--intro {
        align-self: start;
        grid-column: -1 / 1;
        grid-row: 2;
        text-align: right;
        position: relative;
        left: -1.5em;
        width: calc(100% + 1.5em);
    } 
.footer {
    background: #111;
    color: whitesmoke;
    text-align: center;
    padding: 2.5em 0; 
    font-size: var(--fs-h3);
}
.footer a {
    color: inherit;
    text-decoration: none;
}
.footer__link {
    font-weight: var(--fw-bold);
}

.footer__link:hover,
.social-list__link:hover {
    opacity: .7;
}
.footer__link:hover {
    text-decoration: underline;
}
.social-list {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 2em 0 0;
    padding: 0;
}
.social-list__item {
    margin: 0 .5em;
}
.social-list__link {
    padding: .5em;

}


@media (min-width: 600px) {
    .about-me {
        display: grid;
        grid-template-columns: 1fr 200px;
        grid-template-areas: 
        "title img"
        "subtitle img"
        "text img";
        grid-column-gap:2em;
    }
   .section__title--about {
        grid-area: title;
    }
    .about-me__img {
        grid-area:img;
    }
    .section__subtitle--about{
        grid-column: 1/-1;
        grid-row: 2; 
        position: relative;
        left: -1em;
        width: calc(100% + 2em);
        padding-left: 1em;
        padding-right: calc(200px + 4em);
        /*text wont touch the image*/
    }
    .about-me__img {
        grid-area: img;
        position: relative;
        z-index: 2;
    }

@media (min-width: 800px) {

    .about-me {
        max-width: 1000px;
        margin: 0 auto; 
    }
    :root {
        --fs-h1: 4.5rem;
        --fs-h2: 3.75rem;
        --fs-h3: 1.5rem;
        --fs-body: 1.125rem;
        }
    }
}
}
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content ="width=device-width, initial-scale=1.0"/>
    <title>Sensess' Portfolio</title>
    <link rel="stylesheet" href="assets/style.css">
    
<!--Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@300&family=Source+Code+Pro:wght@300&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f671b77a0f.js" crossorigin="anonymous"></script>

</head>
  <body>
<!--Navigation-->  
      <header>
        <nav class="nav">
          <ul class="nav__list">
            <li class="nav__item"><a href= "#home" class="nav__link">Home</a></li> 
            <li class="nav__item"><a href="#about" class="nav__link">About Me</a></li>
            <li class="nav__item"><a href="#work" class="nav__link">My Projects</a></li>
            <li class="nav__item"><a href="#contactme" class="nav__link">Contact Me</a></li>
          </ul>
        </nav>
    </header>
<!--End of Navigation--> 

     
<!--introduction-->

    <section class="intro" id="home">
        <h1 class="section_title section_title--intro">
            Hey, I'm <strong>Sensess</strong>
        </h1>
        <p class="section__subtitle section__subtitle--intro">Aspring Front-End Dev</p>
        <img src="img/Me.JPG" alt="" class="intro__img">
     </section>
<!--About Me-->

    <section class="about-me" id="about">
        <h2 class="section__title section__title--about">Who I am</h2>
            <p class="section__subtitle section__subtitle--about">Current GWU Full-Stack Developer Student based out of NOVA</p>
        
            <div class="about-me__body">
            <p>DJFKLDSJFKDSLJFEWNFIOEWNFIOEWFOIWEJFOIEWJFIOWEJFOWEJF</p>
            <p>WJFEWJOIFJEWOIFJWOEIGJOIWEFJOIWEJFOIEWJFOIWEJFOIWEJF</p>
        </div>
        <img src="img/aboutme.jpg" alt="" class="about-me__img">
    </section>

    <!--My Projects-->

    <section class="my-work" id="work">
        <h2 class="section__title section__title--work">My Projects</h2>
        <p class="section__subtitle section__subtitle--work">An overview of the work I've done </p>
        <!--delete this-->
        <div class="container">
            <div class="portfolio">
            <!--Project 1-->
            <a href="https://amadayasuki.github.io/Horiseon--Challenge-1/" class="portfolio__item"><img src="img/horiseonmockup.jpg" alt="Project 1" class="portfolio__img"></a>
             <!--Project 2-->
            <a href="https://amadayasuki.github.io/run-buddy/" class="portfolio__item"><img src="img/runbuddymockup.jpg" alt="Project 2" class="portfolio__img"></a>
             <!--Project 3-->
            <a href="#" class="portfolio__item"><img src="img/javascriptpasswordmockup.jpg" alt="Project 3" class="portfolio__img"></a>
            </div>
        </div>

    </section>

    <!--Footer-->

    <footer class="footer">
        <a href="mailto:SensessYentzer@outlook.com" class="footer__link" id="contactme">Email Me</a>
            <ul class="social-list">
                <li class="social-list__item">
                    <a class="social-list__link" href="https://github.com/amadayasuki">
                        <i class="fa-brands fa-github"></i>
                    </a>
                </li>
                <li class="social-list__item">
                    <a class="social-list__link" href="https://www.linkedin.com/in/sensess-yentzer-915882160/">
                        <i class="fa-brands fa-linkedin"></i>
                    </a>
                </li>
                <li class="social-list__item">
                    <a class="social-list__link" href="https://www.instagram.com/linglinglomeinnnn/">
                        <i class="fa-brands fa-instagram-square"></i>
                    </a>
                </li>
            </ul>
        </footer>
    </body>
</html>

Picture of problem pt 2

css html
1 Answers

I removed the space above of nav by setting a border for header! I don't know why but it works. Also about the second of your issue, I don't know exactly what is your mean, but if want the color of my projects to be different than others, I fixed it like this: Set a different color for .nav a.project:

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --ff-primary: 'Overpass Mono', monospace;
  --ff-secondary: 'Source Code Pro', monospace;
  --fw-reg: 300;
  --fw-bold: 900;
  --clr-bg: #fff;
  --clr-dark: #0d2e1e;
  --clr-accent: #98ec98bd;
  --fs-h1: 3rem;
  --fs-h2: 2.25rem;
  --fs-body: 1rem;
  --bs: 0.25em 0.25em 0.75em rgba(0, 0, 0, .25), 0.125em 0.125em 0.25em rgba(0, 0, 0, .15);
}

body {
  background: var(--clr-light);
  color: var(--clr-dark);
  margin: 0;
  font-family: var(--ff-primary);
  font-size: var(--fs-body);
  line-height: 1.6;
}

section {
  padding: 5 em 2em;
}

img {
  display: block;
  max-width: 100%;
}

h1 h2 h3 {
  line-height: 1;
  margin: 0;
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3)
}

.section__title {
  margin-bottom: .25em;
}

.section__title--intro {
  font-weight: var(--fw-reg);
}

.section__subtitle {
  margin: 0;
  font-size: var(--fs-h3)
}

.section__subtitle--intro,
.section__subtitle--about {
  background: var(--clr-accent);
  /*background-color: lightblue;*/
  padding: .25em 1em;
  font-family: var(--ff-secondary);
  margin-bottom: 1em;
}

.section__subtitle--work {
  color: white;
  font-weight: var(--fw-bold);
  margin-bottom: 2em;
}

.intro {
  position: relative;
}

header {
  border: solid; /* here */
  background-color: var(--clr-dark);
  /*display:inline;
    flex-direction: row;
    justify-content: space-between;
    padding: 1 em;
    */
}

.nav {
  color: var(--clr-light);
  top: 0;
  left: 0;
  right: 0;
}

.nav a {
  color: white;
  text-decoration: none;
}

.nav a.project {
  color: red; /* here */
}

.nav li {
  list-style: none;
  display: flex;
  justify-content: space-evenly;
}

.intro__img {
  box-shadow: var(--bs);
}

.section__subtitle--intro {
  display: inline-block;
}

.about-me__img {
  box-shadow: var(--bs);
}

.my-work {
  background-color: var(--clr-dark);
  color: var(--clr-light);
  text-align: center;
}

.portfolio {
  display: flex;
  margin: 0 auto;
  padding: 5px;
}

.container {
  display: flex;
}

.portfolio_item {
  background: var(--clr-accent);
  overflow: hidden;
}

.portfolio__img {
  /*width: 100%*/
  width: 250px;
  height: 250px;
  transition: transform 750ms cubic-bezier(.5, 0, .5, 1), opacity 250ms linear;
}

.portfolio__img:hover,
.portfolio_item:focus .portfolio__img {
  transform: scale(1.2);
  opacity: .75;
}

@media (min-width: 350px) {
  .footer {
    background: #111;
    color: whitesmoke;
    text-align: center;
    padding: 2.5em 0;
    font-size: var(--fs-h3);
  }
  .footer a {
    color: inherit;
    text-decoration: none;
  }
  .footer__link {
    font-weight: var(--fw-bold);
  }
  .footer__link:hover,
  .social-list__link:hover {
    opacity: .7;
  }
  .footer__link:hover {
    text-decoration: underline;
  }
  ul {
    list-style-type: none;
  }
  @media (min-width: 600px) {
    .intro {
      display: grid;
      width: min-content;
      margin: 0 auto;
      grid-column-gap: 1em;
      grid-template-areas: "img title" "img subtitle";
      grid-template-columns: min-content max-content;
    }
    .intro__img {
      grid-area: img;
      min-width: 250px;
      position: relative;
      z-index: 2;
    }
    .section__subtitle--intro {
      align-self: start;
      grid-column: -1 / 1;
      grid-row: 2;
      text-align: right;
      position: relative;
      left: -1.5em;
      width: calc(100% + 1.5em);
    }
    .footer {
      background: #111;
      color: whitesmoke;
      text-align: center;
      padding: 2.5em 0;
      font-size: var(--fs-h3);
    }
    .footer a {
      color: inherit;
      text-decoration: none;
    }
    .footer__link {
      font-weight: var(--fw-bold);
    }
    .footer__link:hover,
    .social-list__link:hover {
      opacity: .7;
    }
    .footer__link:hover {
      text-decoration: underline;
    }
    .social-list {
      list-style: none;
      display: flex;
      justify-content: center;
      margin: 2em 0 0;
      padding: 0;
    }
    .social-list__item {
      margin: 0 .5em;
    }
    .social-list__link {
      padding: .5em;
    }
    @media (min-width: 600px) {
      .about-me {
        display: grid;
        grid-template-columns: 1fr 200px;
        grid-template-areas: "title img" "subtitle img" "text img";
        grid-column-gap: 2em;
      }
      .section__title--about {
        grid-area: title;
      }
      .about-me__img {
        grid-area: img;
      }
      .section__subtitle--about {
        grid-column: 1/-1;
        grid-row: 2;
        position: relative;
        left: -1em;
        width: calc(100% + 2em);
        padding-left: 1em;
        padding-right: calc(200px + 4em);
        /*text wont touch the image*/
      }
      .about-me__img {
        grid-area: img;
        position: relative;
        z-index: 2;
      }
      @media (min-width: 800px) {
        .about-me {
          max-width: 1000px;
          margin: 0 auto;
        }
         :root {
          --fs-h1: 4.5rem;
          --fs-h2: 3.75rem;
          --fs-h3: 1.5rem;
          --fs-body: 1.125rem;
        }
      }
    }
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sensess' Portfolio</title>
  <link rel="stylesheet" href="assets/style.css">

  <!--Fonts-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@300&family=Source+Code+Pro:wght@300&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/f671b77a0f.js" crossorigin="anonymous"></script>

</head>

<body>
  <!--Navigation-->
  <header>
    <nav class="nav">
      <ul class="nav__list">
        <li class="nav__item"><a href="#home" class="nav__link">Home</a></li>
        <li class="nav__item"><a href="#about" class="nav__link">About Me</a></li>
        <li class="nav__item"><a href="#work" class="nav__link project">My Projects</a></li>
        <li class="nav__item"><a href="#contactme" class="nav__link">Contact Me</a></li>
      </ul>
    </nav>
  </header>
  <!--End of Navigation-->


  <!--introduction-->

  <section class="intro" id="home">
    <h1 class="section_title section_title--intro">
      Hey, I'm <strong>Sensess</strong>
    </h1>
    <p class="section__subtitle section__subtitle--intro">Aspring Front-End Dev</p>
    <img src="img/Me.JPG" alt="" class="intro__img">
  </section>
  <!--About Me-->

  <section class="about-me" id="about">
    <h2 class="section__title section__title--about">Who I am</h2>
    <p class="section__subtitle section__subtitle--about">Current GWU Full-Stack Developer Student based out of NOVA</p>

    <div class="about-me__body">
      <p>DJFKLDSJFKDSLJFEWNFIOEWNFIOEWFOIWEJFOIEWJFIOWEJFOWEJF</p>
      <p>WJFEWJOIFJEWOIFJWOEIGJOIWEFJOIWEJFOIEWJFOIWEJFOIWEJF</p>
    </div>
    <img src="img/aboutme.jpg" alt="" class="about-me__img">
  </section>

  <!--My Projects-->

  <section class="my-work" id="work">
    <h2 class="section__title section__title--work">My Projects</h2>
    <p class="section__subtitle section__subtitle--work">An overview of the work I've done </p>
    <!--delete this-->
    <div class="container">
      <div class="portfolio">
        <!--Project 1-->
        <a href="https://amadayasuki.github.io/Horiseon--Challenge-1/" class="portfolio__item"><img src="img/horiseonmockup.jpg" alt="Project 1" class="portfolio__img"></a>
        <!--Project 2-->
        <a href="https://amadayasuki.github.io/run-buddy/" class="portfolio__item"><img src="img/runbuddymockup.jpg" alt="Project 2" class="portfolio__img"></a>
        <!--Project 3-->
        <a href="#" class="portfolio__item"><img src="img/javascriptpasswordmockup.jpg" alt="Project 3" class="portfolio__img"></a>
      </div>
    </div>

  </section>

  <!--Footer-->

  <footer class="footer">
    <a href="mailto:SensessYentzer@outlook.com" class="footer__link" id="contactme">Email Me</a>
    <ul class="social-list">
      <li class="social-list__item">
        <a class="social-list__link" href="https://github.com/amadayasuki">
          <i class="fa-brands fa-github"></i>
        </a>
      </li>
      <li class="social-list__item">
        <a class="social-list__link" href="https://www.linkedin.com/in/sensess-yentzer-915882160/">
          <i class="fa-brands fa-linkedin"></i>
        </a>
      </li>
      <li class="social-list__item">
        <a class="social-list__link" href="https://www.instagram.com/linglinglomeinnnn/">
          <i class="fa-brands fa-instagram-square"></i>
        </a>
      </li>
    </ul>
  </footer>
</body>

</html>

user_170071840
Related