How to Get Logo to Align Left and Nav Links to Align Right?-CodePudding

I'm trying everything, I'm new at this and just cannot get it to work. I just wanted my logo ("animated") to always align left, and the links to align right. Just like any normal nav bar.

The animated logo works just fine. I just can't separate the logo from the links and align them?

I've tried float: right and margin-right: auto under the animated logo.

.container {
  max-width: 1280px;
  margin: 0 right;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav {
  display: flex;
  z-index: 50;
  background-color: #FFFFFF;
  padding: 16px 32px;
}

a {
  text-decoration: none;
}

.logo {
  display: inline-flex;
}

.animated-logo {
  display: flex;
  color: #000000;
  transition-property: transform;
  transition-duration: .15s;
  font-size: 35px;
  font-weight: 600;
}

menu a {
  color: black;
  margin: 0 16px;
  font-weight: 300;
  text-decoration: none;
  transition: 0.2s;
  padding: 8px 5px;
  border-radius: 99px;
  font-size: 20px;
}

.menu a:hover {
  color: #808080;
}

<nav>
  <div >
    <a href="index.html" >
      <h3 >
        <span >t</span>
        <span >a</span>
        <span >a</span>
        <span >r</span>
        <span >s</span>
        <span >t</span>
        <span >r</span>
      </h3>
    </a>

    <div >
      <a href="about.html">About</a>
      <a href="experience.html">Experience</a>
      <a href="mailto:email">Contact Me</a>

    </div>
</nav>

CodePudding user response：

Add width: 100vw; to the .container. You only set max-width, which is not enough because the width will be "auto" if there's not enough content, but never more than 1280px.

See the snippet below.

.container {
  width: 100vw; /* Added */
  max-width: 1280px;
  margin: 0 right;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav {
  display: flex;
  z-index: 50;
  background-color: #FFFFFF;
  padding: 16px 32px;
}

a {
  text-decoration: none;
}

.logo {
  display: inline-flex;
}

.animated-logo {
  display: flex;
  color: #000000;
  transition-property: transform;
  transition-duration: .15s;
  font-size: 35px;
  font-weight: 600;
}

.menu a {
  color: black;
  margin: 0 16px;
  font-weight: 300;
  text-decoration: none;
  transition: 0.2s;
  padding: 8px 5px;
  border-radius: 99px;
  font-size: 20px;
}

.menu a:hover {
  color: #808080;
}

<body>
  <nav>
    <div >
      <a href="index.html" >
        <h3 >
          <span >t</span>
          <span >a</span>
          <span >a</span>
          <span >r</span>
          <span >s</span>
          <span >t</span>
          <span >r</span>
        </h3>
      </a>

      <div >
        <a href="about.html">About</a>
        <a href="experience.html">Experience</a>
        <a href="mailto:email">Contact Me</a>
      </div>
    </div>
  </nav>
</body>

CodePudding user response：

What I usually use for navbars is a display: flex; If I understood correctly what you want to do is organise the elements horizontally in the bar, to do that you can give the container class the following properties:

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-around;
}

If that doesn't suit your needs or if you want more informations about flex boxes I'd recommend this website: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ It explains all you need to know about flex boxes and could help you find a solution to your problem.

CodePudding user response：

You can try with bootstrap ready-made template https://getbootstrap.com/docs/4.0/examples/