CODEWITHSUNDEEP
htmlcss
PhysicsMathsLove
PhysicsMathsLove

Reputation: 103

CSS - header spacing from right not equal to spacing from left

enter image description hereThis is my first attempt at actually trying to do some CSS outside of www.codeacademy.com and I am having some trouble.

When I run my code, I find that the text in the header is not aligning and the 'logout' is being pushed up against the right as opposed to having the same distance from the edge as 'My Inventory'.

What am I doing wrong?

Also feel free to tell me if I am structuring things badly or anything else, so I can learn. I hope this is the correct place for something like this!

HTML code:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Blank</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>

  <div class="container">
    <div class="header">
      <header>
        <ul>
          <li> <a class="active" href="#home">My Inventory</a></li>
          <li><a class="browse" href="#browse">Browse Papers</a></li>
          <li><a class="build" href="#build">Build A Paper</a></li>
          <li><a class="data" href="#data">View Data</a></li>
          <li style="float:right"><a class="admin" href="#admin">Settings</a></li>
          <li style="float:right"><a class="logout" href="#logout">Log Out</a></li>
        </ul>
      </header>
    </div>

  </div>

  </body>
</html>

CSS

html {
  font-family: "PT Sans", sans-serif;
}

body {
  margin: 0;
  padding: 0;
}

.container {
  min-height:100%;
  min-width:100%;
  display: grid;
}

a {
  text-decoration: none;
}

.header{
  font-size: 18px;
  line-height: 1.25pt;
  background-color: #00AFB5;
  width: 100%;
  height: 50px;
  top: 0;
  margin: 0;
  padding-top: 20px;
  padding-bottom:20px;
  padding-left: 10px;
  padding-right: 10px;
  list-style-type: none;
}

.header li {
  display: inline-block;
}

.header a {
  display: block;
  color: #fff;
}

Upvotes: 0

Views: 53

Answers (1)

dale landry
dale landry

Reputation: 8600

Use bootstrap, it gives you plenty of options for resizing the viewport and keeping your look and feel of the style. Here is a default example of bootstrap using your link settings. View it in full page mode in the snipit.

https://getbootstrap.com/

https://getbootstrap.com/docs/4.0/components/navbar/

NOTE: I am using the CDN for the example, if you wish to change the styles Download the bootstrap file.

  1. Search For bootstrap css file.
  2. Open the (bootstrap. css) file and search for 'primary'.
  3. Change it to the color you desire.
  4. You can change any of the theme colors there.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link active" href="#home">My Inventory</a>
            </li>
            <li class="nav-item">
                <a class="nav-link browse" href="#browse">Browse Papers</a>
            </li>
            <li class="nav-item">
                <a class="nav-link build" href="#build">Build A Paper</a>
            </li>
            <li class="nav-item">
                <a class="nav-link data" href="#data">View Data</a>
            </li>
        </ul>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link admin" href="#admin">Settings</a>
            </li>
            <li class="nav-item">
                <a class="nav-link logout" href="#logout">Log Out</a>
            </li>
        </ul>
    </div>
</nav>

Run the snipit in full page mode.

Upvotes: 1

Related Questions