Divs not spacing evenly with margins-CodePudding

I am having trouble evenly spacing my divs for Projects, Videos, Portfolios and Contact using margins. I wanted it to start even spacing from the right of the screen. But I didn't use pixel values for spacing because I wanted to avoid hardcoded numbers as much as possible. I also realize that the way I have designed the nav-bar isn't the most efficient.

body {
  background-color: black;
  margin: 0px;
  font-family: "Caveat", cursive;
  font-family: "Ubuntu", sans-serif;
}

.title-bar {
  height: 14%;
  width: 100%;
  position: relative;
  color: white;
  font-size: 30px;
}

.title-icon {
  position: absolute;
  margin-left: 5%;
}

.title-links {
  position: relative;
  right: 0px;
  top: 0px;
  margin-right: 5%;
}

.title-1 {
  position: absolute;
  right: 0px;
  margin-right: 45%;
}

.title-2 {
  position: absolute;
  right: 0px;
  margin-right: 30%;
}

.title-3 {
  position: absolute;
  right: 0px;
  margin-right: 15%;
}

.title-4 {
  position: absolute;
  right: 0px;
  margin-right: 0;
}

.title-link {
  color: white;
  text-decoration: none;
}

.title-link:hover {
  color: rgb(0, 63, 145);
  text-decoration: none;
}

<div >
  <div >
    <h3>Rupak Y</h3>
  </div>
  <div >
    <div >
      <a  href="#">
        <h3>Projects</h3>
      </a>
    </div>
    <div >
      <a  href="#">
        <h3>Videos</h3>
      </a>
    </div>
    <div >
      <a  href="#">
        <h3>Portfolio</h3>
      </a>
    </div>
    <div >
      <a  href="#">
        <h3>Contact</h3>
      </a>
    </div>
  </div>

CodePudding user response：

Here is a solution using the table tag I adapted from the zer00ne's answer from the this question.

html,
body {
  background-color: black;
  margin: 0px;
  font-family: "Caveat", cursive;
  font-family: "Ubuntu", sans-serif;
}

table {
  width: 100%;
  table-layout: fixed;
}

th {
  width: 20%
}

<html>
  <head>
    <title>Rupak Yeware - Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="CSS/styles.css" />
  </head>
  <body>
    <table class='table table-striped jambo_table'>
          <th class='column-title' style="color:white">Rupak Y</th>
          <th class='column-title' style="color:white"><a href="#;">Projects</a></th>
          <th class='column-title' style="color:white"><a href="#;">Videos</a></th>
          <th class='column-title' style="color:white"><a href="#;">Portfolio</a></th>
          <th class='column-title no-link last' style="color:white"><span class='nobr'><a href="#;">Contact</a></span></th>
    </table>
  </body>
</html>

Using a column for each of your headers and then evenly spacing them by 20% will allow you keep them all evenly spaced. If you ever add more headers, obviously you need to adjust the percentage they are spaced by.

Here is more information about the table tag:

https://www.w3schools.com/tags/tag_table.asp

CodePudding user response：

Don't ever use position: absolute for situations like this. This can be done a lot easier and with less CSS:

Use display: flex both on the container and the links div, add margin-left: auto to the links div to align it right and add some margins to the single links to create a distance between them (I used 3vw margin-left, a unit relative to the viewport width). Also, apply display: block to the a tags to make them behave as blocks, and use left and right padding on the container to create the offset of the texts at the left and right side.

body {
  background-color: black;
  margin: 0px;
  font-family: "Caveat", cursive;
  font-family: "Ubuntu", sans-serif;
}

.title-bar {
  display: flex;
  height: 14%;
  color: white;
  font-size: 18px;
  padding: 0 3%;
}

.title-links {
  margin-left: auto;
  display: flex;
}

.title-link {
  display: block;
  margin-left: 3vw;
  color: white;
  text-decoration: none;
}

.title-link:hover {
  color: rgb(0, 63, 145);
  text-decoration: none;
}

<div >
  <div >
    <h3>Rupak Y</h3>
  </div>
  <div >
    <div >
      <a  href="#">
        <h3>Projects</h3>
      </a>
    </div>
    <div >
      <a  href="#">
        <h3>Videos</h3>
      </a>
    </div>
    <div >
      <a  href="#">
        <h3>Portfolio</h3>
      </a>
    </div>
    <div >
      <a  href="#">
        <h3>Contact</h3>
      </a>
    </div>
  </div>