Flex Box Trouble : Webdev

Hey guys! I’ve recently been playing around with using flex (as I am new to web development) and I’ve come across a random error where I don’t even know how to trouble shoot…

There used to be a border around my logo image, and then it disappeared! And on my phone, the navbar and the web pages never merged, now they do (even though they don’t merge on the full web version? Also on the web version, now some of my buttons on the navbar are in wonky positions.

I feel like this is something super simple that I just don’t know how or what to do for it…

Here’s some pictures & code!

This is the full web version

This is the mobile version

Header HTML:

<?php
  session_start();
?>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="description" content="Example of meta discription.">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  </head>

    <header>
      <nav>
        <div class="navigation">
          <a href="teacherportal.php">
            <img src="img/logo.png" alt="logo">
          </a>
          <ul>
            <li><a href="index.php">Not a Teacher?</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About Me</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
          <div class="log-on">
            <?php
              if(isset($_SESSION['userid'])){
                echo '
                      <form action="includes/logout.inc.php" method="post">
                        <div class=buttons>
                        <button type="submit" name="logout-submit">Logout</button>
                        </div>
                      </form>
                ';
              }
              else{
                echo '
                      <form action="includes/login.inc.php" method="post">
                        <input  type="text" name="mailuid" placeholder="Username/Email...">
                        <input  type="password" name="pwd" placeholder="Password...">
                        <button type="submit" name="login-submit">Login</button>
                      </form>
                      <a href="tsignup.php">
                        <button>Signup</button>
                      </a>
                ';
              }
             ?>

          </div>
        </div>
      </nav>
    </header>

<?php
  require "theader.php";
?>

    <link rel="stylesheet" href="css/signup.css">
    <main>
      <div class="signup">
        <section>
          <h1>Signup</h1>
          <?php
            if(isset($_GET['error'])){
              if($_GET['error'] == "emptyfields"){
                echo '<p>Fill in all fields</p>';
              }
              elseif($_GET["error"] == "invalidemailuserid"){
                echo '<p>Invalid email and user ID</p>';
              }
              elseif($_GET["error"] == "invalidemail"){
                echo '<p>Invalid email</p>';
              }
              elseif($_GET["error"] == "invaliduserid"){
                echo '<p>Invalid user ID</p>';
              }
              elseif($_GET["error"] == "passwordcheck"){
                echo '<p>Passwords do not match</p>';
              }
              elseif($_GET["error"] == "useridtaken"){
                echo '<p>User ID is alreadu taken</p>';
              }
            }

            if(isset($_GET["signup"])){
              if($_GET["signup"] == "success")
              echo '<p>Signup successful!</p>';
            }
           ?>
          <form class="form-signup" action="includes/tsignup.inc.php" method="post">
            <input type="text" name="userid" placeholder="Username">
            <input type="text" name="email" placeholder="Email">
            <input type="password" name="pwd" placeholder="Password">
            <input type="password" name="pwd-repeat" placeholder="Repeat password">
            <button type="submit" name="signup-submit">Signup</button>
          </form>
        </section>
      </div>
    </main>

<?php
  require "footer.php";
 ?>

CSS for header:

body{
  padding:0;
  margin: 0;
}
.navigation{
  border: 1px solid black;
  height: 120px;
  display:flex;
  padding: 0;
  margin: 0;
  justify-content: space-around;
  flex-wrap: wrap;
}

img{
  padding:0.5em;
  border: 40px dotted red;
  width: 150px;

}

ul{
  border: 1px solid black;
  display:flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
  justify-content: space-around;
}

li{
  background-color: white;
  color: black;
  border: 2px solid #555555;
  height: 20px;
  padding: 0.5em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

li:hover{
  background-color: #555555;
  color: white;
}

.log-on{
  display:flex;
  border: 1px solid black;
}

input{
  padding:0.5em;
  margin:0.5em;
}

button{
  background-color: white;
  color: black;
  border: 2px solid #555555;
  padding: 5px 10npx;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

button:hover {
  background-color: #555555;
  color: white;
}

CSS for Sign up:

.signup{
  border:1px solid black;
  display:flex;
  justify-content: center;
}

.form-signup{
  border:1px solid black;
  display:flex;
  flex-direction: column;
}

h1{
  border:1px solid black;
  display: flex;
  justify-content: center;
}

Source link