Home > Blockchain >  What in my CSS is making my header/nav bar display incorrectly?
What in my CSS is making my header/nav bar display incorrectly?

Time：04-01

Still learning code. I am building a contact page and wanted to include my header bar at the top of the page, but when I added the code for this my header bar appears to the left of my page all wacky. I know this is most likely a CSS error, but I can't seem to pinpoint why my header bar wouldn't display at the top of my page. Anyone willing to take a look? Here's my code.

<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
   <!-- <title> Responsive Contact Us Form  | CodingLab </title>
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
    <link href="css/stylesheet2.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>

<body>

<header>
          <section >
              
                  <div >
                          <div >
                                  <a href="index.html">
                                          <img alt="ArtUcii logo"  src="images/Artucii_logo.png">
                                  </a>


                          </div>

                          <ul >
                                  <li><a href="index.html">Home</a></li>
                                  <li><a href="portfolio.html">Portfolio</a></li>
                                  <li><a href="aboout_me.html">About ME</a>
                                  <li><a href="contact.html">Contact</a></li>

                          </ul>
                  </div>

          </section>

  </header>
  <div >
    <div >
      <div >
        <div >
          <i ></i>
          <div >Address</div>
          <div >Los Angles, CA</div>
          <div >Austin,TX</div>
        </div>
        <div >
          <i ></i>
          <div >Phone</div>
          <div >(512) xxx-xxxx</div>
          <div > </div>
        </div>
        <div >
          <i ></i>
          <div >Email</div>
          <div >[email protected]</div>
          <div >[email protected]</div>
        </div>
      </div>
      <div >
        <div >Send me a message!</div>
          <br>
        <p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
      <form action="#">
        <div >
          <input type="text" placeholder="Enter your name">
        </div>
        <div >
          <input type="text" placeholder="Enter your email">
        </div>
        <div >
          
        </div>
        <div >
          <input type="button" value="Send Now" >
        </div>
      </form>
    </div>
    </div>
  </div>
</body>
</html>



/* About ME */
/* Google Font CDN Link */
/* Header */
.header {
    width: 100%;
    height: 50px;
    display: block;
    background-color: #61d1e2; /* For browsers that do not support gradients */
    background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
    background-color: #61d1e2; /* For browsers that do not support gradients */
    background-image: linear-gradient(#e7bddc, #61d1e2);
}

.logo_container {
    height: 100%;
    display: table;
    float: left;
    border: none;
}
.logo {
    
    max-height: 50px;
    display: table-cell;
    vertical-align: middle;
}
/* Navigation */
.navigation {
    float: right;
    height: 100%;
    margin: 0;
}
.navigation li {
    float: left;
    height: 100%;
    display: table-cell;
    padding: 15px 20px;
    position: relative;
    box-sizing: border-box;
    text-decoration: none;
}
a:hover {
    color: #bc0456 !important;
}
.navigation li a {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    color:#067393;
    font-family: Kapelka New;
    text-decoration: none !important;
}
.sub_menu1 {
    display: none;
}
.navigation li:hover .sub_menu1 {
    display: block;
    position: absolute;
    background: black;
    top: 100%;
}
.navigation li:hover .sub_menu1 ul {
    display: inline-block;
    margin: 0%;
    padding: 0%;
    text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
   padding: 5px;  
}




@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins" , sans-serif;
}
body{
  min-height: 100vh;
  width: 100%;
  background: #f99a61;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container{
  width: 85%;
  background: #fff;
  border-radius: 6px;
  padding: 20px 60px 30px 40px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container .content .left-side{
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  position: relative;
}
.content .left-side::before{
  content: '';
  position: absolute;
  height: 70%;
  width: 2px;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  background: #afafb6;
}
.content .left-side .details{
  margin: 14px;
  text-align: center;
}
.content .left-side .details i{
  font-size: 30px;
  color: #067393;
  margin-bottom: 10px;
}
.content .left-side .details .topic{
  font-size: 18px;
  font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two{
  font-size: 14px;
  color: #afafb6;
}
.container .content .right-side{
  width: 75%;
  margin-left: 75px;
}
.content .right-side .topic-text{
  font-size: 23px;
  font-weight: 600;
  color: #bc0456;
}
.right-side .input-box{
  height: 50px;
  width: 100%;
  margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea{
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  font-size: 16px;
  background: #F0F1F8;
  border-radius: 6px;
  padding: 0 15px;
  resize: none;
}
.right-side .message-box{
  min-height: 110px;
}
.right-side .input-box textarea{
  padding-top: 6px;
}
.right-side .button{
  display: inline-block;
  margin-top: 12px;
}
.right-side .button input[type="button"]{
  color: #fff;
  font-size: 18px;
  outline: none;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  background: #067393;
  cursor: pointer;
  transition: all 0.3s ease;
}
.button input[type="button"]:hover{
  background: #bc0456;
}

@media (max-width: 950px) {
  .container{
    width: 90%;
    padding: 30px 40px 40px 35px ;
  }
  .container .content .right-side{
   width: 75%;
   margin-left: 55px;
}
}
@media (max-width: 820px) {
  .container{
    margin: 40px 0;
    height: 100%;
  }
  .container .content{
    flex-direction: column-reverse;
  }
 .container .content .left-side{
   width: 100%;
   flex-direction: row;
   margin-top: 40px;
   justify-content: center;
   flex-wrap: wrap;
 }
 .container .content .left-side::before{
   display: none;
 }
 .container .content .right-side{
   width: 100%;
   margin-left: 0;
 }
}

CodePudding user response：

Your <header> (as opposed to <head>) has to be inside the <body> tag (which contains everything that is visible on the page)!

CodePudding user response：

As a start, IMO, <body> should not be styled as flex, at least not when using <header> which brings its own defaults which were being overridden.

Moving the flex styles from body to .container will fix your immediate request, but probably introduce other styling concerns.

.header {
  width: 100%;
  height: 50px;
  display: block;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.header_content {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.logo_container {
  height: 100%;
  display: table;
  float: left;
  border: none;
}

.logo {
  max-height: 50px;
  display: table-cell;
  vertical-align: middle;
}


/* Navigation */

.navigation {
  float: right;
  height: 100%;
  margin: 0;
}

.navigation li {
  float: left;
  height: 100%;
  display: table-cell;
  padding: 15px 20px;
  position: relative;
  box-sizing: border-box;
  text-decoration: none;
}

a:hover {
  color: #bc0456 !important;
}

.navigation li a {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  color: #067393;
  font-family: Kapelka New;
  text-decoration: none !important;
}

.sub_menu1 {
  display: none;
}

.navigation li:hover .sub_menu1 {
  display: block;
  position: absolute;
  background: black;
  top: 100%;
}

.navigation li:hover .sub_menu1 ul {
  display: inline-block;
  margin: 0%;
  padding: 0%;
  text-align: center;
}

.navigation li:hover .sub_menu1 ul li {
  padding: 5px;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  min-height: 100vh;
  width: 100%;
  background: #f99a61;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 85%;
  background: #fff;
  border-radius: 6px;
  padding: 20px 60px 30px 40px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.container .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.container .content .left-side {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  position: relative;
}

.content .left-side::before {
  content: '';
  position: absolute;
  height: 70%;
  width: 2px;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  background: #afafb6;
}

.content .left-side .details {
  margin: 14px;
  text-align: center;
}

.content .left-side .details i {
  font-size: 30px;
  color: #067393;
  margin-bottom: 10px;
}

.content .left-side .details .topic {
  font-size: 18px;
  font-weight: 500;
}

.content .left-side .details .text-one,
.content .left-side .details .text-two {
  font-size: 14px;
  color: #afafb6;
}

.container .content .right-side {
  width: 75%;
  margin-left: 75px;
}

.content .right-side .topic-text {
  font-size: 23px;
  font-weight: 600;
  color: #bc0456;
}

.right-side .input-box {
  height: 50px;
  width: 100%;
  margin: 12px 0;
}

.right-side .input-box input,
.right-side .input-box textarea {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  font-size: 16px;
  background: #F0F1F8;
  border-radius: 6px;
  padding: 0 15px;
  resize: none;
}

.right-side .message-box {
  min-height: 110px;
}

.right-side .input-box textarea {
  padding-top: 6px;
}

.right-side .button {
  display: inline-block;
  margin-top: 12px;
}

.right-side .button input[type="button"] {
  color: #fff;
  font-size: 18px;
  outline: none;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  background: #067393;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button input[type="button"]:hover {
  background: #bc0456;
}

@media (max-width: 950px) {
  .container {
    width: 90%;
    padding: 30px 40px 40px 35px;
  }
  .container .content .right-side {
    width: 75%;
    margin-left: 55px;
  }
}

@media (max-width: 820px) {
  .container {
    margin: 40px 0;
    height: 100%;
  }
  .container .content {
    flex-direction: column-reverse;
  }
  .container .content .left-side {
    width: 100%;
    flex-direction: row;
    margin-top: 40px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .container .content .left-side::before {
    display: none;
  }
  .container .content .right-side {
    width: 100%;
    margin-left: 0;
  }
}
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
</head>

<body>

  <header>
    <section >

      <div >
        <div >
          <a href="index.html">
            <img alt="ArtUcii logo"  src="images/Artucii_logo.png">
          </a>


        </div>

        <ul >
          <li><a href="index.html">Home</a></li>
          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="aboout_me.html">About ME</a>
            <li><a href="contact.html">Contact</a></li>

        </ul>
      </div>

    </section>

  </header>
  <div >
    <div >
      <div >
        <div >
          <i ></i>
          <div >Address</div>
          <div >Los Angles, CA</div>
          <div >Austin,TX</div>
        </div>
        <div >
          <i ></i>
          <div >Phone</div>
          <div >(512) xxx-xxxx</div>
          <div > </div>
        </div>
        <div >
          <i ></i>
          <div >Email</div>
          <div >[email protected]</div>
          <div >[email protected]</div>
        </div>
      </div>
      <div >
        <div >Send me a message!</div>
        <br>
        <p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
        <form action="#">
          <div >
            <input type="text" placeholder="Enter your name">
          </div>
          <div >
            <input type="text" placeholder="Enter your email">
          </div>
          <div >

          </div>
          <div >
            <input type="button" value="Send Now">
          </div>
        </form>
      </div>
    </div>
  </div>
</body>

</html>

CodePudding user response：

The problem occurs from the body. You assign to flex. I removed it and create a new div which wrappend the container. If you want reduce the width in the navbar you have to wrapped to another div and center it.

/* About ME */
/* Google Font CDN Link */
/* Header */
.header {
    width: 100%;
    height: 50px;
    display: block;
    background-color: #61d1e2; /* For browsers that do not support gradients */
    background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
    background-color: #61d1e2; /* For browsers that do not support gradients */
    background-image: linear-gradient(#e7bddc, #61d1e2);
}

.logo_container {
    height: 100%;
    display: table;
    float: left;
    border: none;
}
.logo {
    
    max-height: 50px;
    display: table-cell;
    vertical-align: middle;
}
/* Navigation */
.navigation {
    float: right;
    height: 100%;
    margin: 0;
}
.navigation li {
    float: left;
    height: 100%;
    display: table-cell;
    padding: 15px 20px;
    position: relative;
    box-sizing: border-box;
    text-decoration: none;
}
a:hover {
    color: #bc0456 !important;
}
.navigation li a {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    color:#067393;
    font-family: Kapelka New;
    text-decoration: none !important;
}
.sub_menu1 {
    display: none;
}
.navigation li:hover .sub_menu1 {
    display: block;
    position: absolute;
    background: black;
    top: 100%;
}
.navigation li:hover .sub_menu1 ul {
    display: inline-block;
    margin: 0%;
    padding: 0%;
    text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
   padding: 5px;  
}




@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins" , sans-serif;
}
body{
  min-height: 100vh;
  width: 100%;
  background: #f99a61;
  

}
.wrapper {
   display: flex;
  align-items: center;
  justify-content: center; 
}

.container{
  width: 85%;
  background: #fff;
  border-radius: 6px;
  padding: 20px 60px 30px 40px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.container .content{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.container .content .left-side{
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  position: relative;
}
.content .left-side::before{
  content: '';
  position: absolute;
  height: 70%;
  width: 2px;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  background: #afafb6;
}
.content .left-side .details{
  margin: 14px;
  text-align: center;
}
.content .left-side .details i{
  font-size: 30px;
  color: #067393;
  margin-bottom: 10px;
}
.content .left-side .details .topic{
  font-size: 18px;
  font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two{
  font-size: 14px;
  color: #afafb6;
}
.container .content .right-side{
  width: 75%;
  margin-left: 75px;
}
.content .right-side .topic-text{
  font-size: 23px;
  font-weight: 600;
  color: #bc0456;
}
.right-side .input-box{
  height: 50px;
  width: 100%;
  margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea{
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  font-size: 16px;
  background: #F0F1F8;
  border-radius: 6px;
  padding: 0 15px;
  resize: none;
}
.right-side .message-box{
  min-height: 110px;
}
.right-side .input-box textarea{
  padding-top: 6px;
}
.right-side .button{
  display: inline-block;
  margin-top: 12px;
}
.right-side .button input[type="button"]{
  color: #fff;
  font-size: 18px;
  outline: none;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  background: #067393;
  cursor: pointer;
  transition: all 0.3s ease;
}
.button input[type="button"]:hover{
  background: #bc0456;
}

@media (max-width: 950px) {
  .container{
    width: 90%;
    padding: 30px 40px 40px 35px ;
  }
  .container .content .right-side{
   width: 75%;
   margin-left: 55px;
}
}
@media (max-width: 820px) {
  .container{
    margin: 40px 0;
    height: 100%;
  }
  .container .content{
    flex-direction: column-reverse;
  }
 .container .content .left-side{
   width: 100%;
   flex-direction: row;
   margin-top: 40px;
   justify-content: center;
   flex-wrap: wrap;
 }
 .container .content .left-side::before{
   display: none;
 }
 .container .content .right-side{
   width: 100%;
   margin-left: 0;
 }
}
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
   <!-- <title> Responsive Contact Us Form  | CodingLab </title>
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
    <link href="css/stylesheet2.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>

<body>

  <header >
         
              
                  <div >
                          <div >
                                  <a href="index.html">
                                          <img alt="ArtUcii logo"  src="images/Artucii_logo.png">
                                  </a>


                          </div>

                          <ul >
                                  <li><a href="index.html">Home</a></li>
                                  <li><a href="portfolio.html">Portfolio</a></li>
                                  <li><a href="aboout_me.html">About ME</a>
                                  <li><a href="contact.html">Contact</a></li>

                          </ul>
                  </div>

          

  </header>
  <div >
    
  <div >
    
    <div >
      <div >
        <div >
          <i ></i>
          <div >Address</div>
          <div >Los Angles, CA</div>
          <div >Austin,TX</div>
        </div>
        <div >
          <i ></i>
          <div >Phone</div>
          <div >(512) xxx-xxxx</div>
          <div > </div>
        </div>
        <div >
          <i ></i>
          <div >Email</div>
          <div >[email protected]</div>
          <div >[email protected]</div>
        </div>
      </div>
      <div >
        <div >Send me a message!</div>
          <br>
        <p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
      <form action="#">
        <div >
          <input type="text" placeholder="Enter your name">
        </div>
        <div >
          <input type="text" placeholder="Enter your email">
        </div>
        <div >
          
        </div>
        <div >
          <input type="button" value="Send Now" >
        </div>
      </form>
    </div>
    </div>
  </div>
  </div>
</body>
</html>

Page link：https//www.codepudding.com/Blockchain/356151.html

Prev:How to space divs that are stacked on top of each other
Next:Looking for a way to apply a separate z-index to 2 background images
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding