Kevin Powell - Community•4mo ago

How to move elements inside a container? (vague, I know)

https://github.com/callum-laing/shopping-site Apologies I tried putting this into codesandbox but it spazzed out, and codepen didn't want to do it either. I'm trying to find out how I move the positioning of the 2 elements on the side (CDL, and the shopping cart image). I tried padding-left and padding-right on the header, but that also moves the links in the middle, is there a better alternative here that doesn't disturb spacing of others?

export default function Navbar() {
  return (
    <div className={styles.header}>
      <div>
        <h1 className={styles.title}>CDL</h1>
      </div>

      <nav className={styles.nav}>
        <Link className={styles.txt} href="/">
          Home
        </Link>
        <Link className={styles.txt} href="/shop">
          Shop
        </Link>
        <Link className={styles.txt} href="/about">
          About Us
        </Link>
      </nav>

      <Link href="/cart">
        <button className={styles.shoppingCart}>
          <span>
            <Image className={styles.cartImage} src={Logo} alt="cart logo" />
          </span>
        </button>
      </Link>
    </div>
  );
}

export default function Navbar() {
  return (
    <div className={styles.header}>
      <div>
        <h1 className={styles.title}>CDL</h1>
      </div>

      <nav className={styles.nav}>
        <Link className={styles.txt} href="/">
          Home
        </Link>
        <Link className={styles.txt} href="/shop">
          Shop
        </Link>
        <Link className={styles.txt} href="/about">
          About Us
        </Link>
      </nav>

      <Link href="/cart">
        <button className={styles.shoppingCart}>
          <span>
            <Image className={styles.cartImage} src={Logo} alt="cart logo" />
          </span>
        </button>
      </Link>
    </div>
  );
}

CSS:

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 2px solid darkgrey;
    }

    .title {
        color: white;
    }

    .nav {
        display: flex;
        justify-content: center;
        align-content: center;
        gap: 50px;
        padding: 20px;
    }

    .shoppingCart {
        background-color: transparent;
        border: none;
    }

    .shoppingCart:hover {
        cursor: pointer;
    }

    .cartImage {
        filter: invert(100%);
    }

    .cartImage:hover {
        filter: none;
    }

    .txt {
        text-decoration: none;
        color: rgba(200, 200, 250);
        font-family: 'Fjalla One', sans-serif;
        letter-spacing: 4px;
    }

    .txt:hover {
        color: white;
        text-decoration: underline;
    }

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 2px solid darkgrey;
    }

    .title {
        color: white;
    }

    .nav {
        display: flex;
        justify-content: center;
        align-content: center;
        gap: 50px;
        padding: 20px;
    }

    .shoppingCart {
        background-color: transparent;
        border: none;
    }

    .shoppingCart:hover {
        cursor: pointer;
    }

    .cartImage {
        filter: invert(100%);
    }

    .cartImage:hover {
        filter: none;
    }

    .txt {
        text-decoration: none;
        color: rgba(200, 200, 250);
        font-family: 'Fjalla One', sans-serif;
        letter-spacing: 4px;
    }

    .txt:hover {
        color: white;
        text-decoration: underline;
    }

4 Replies

CDL•4mo ago

UPDATE! adding this seems to have done the trick, but I'm still curious if there are other solutions.. Added padding to the container for only the left/right sides.

padding: 0px 20px;

padding: 0px 20px;

Tok124 (CSS Nerd)•4mo ago

you can instead do padding-inline:20px; so you dont need to set padding on top and bottom to 0 pixels padding-inline is for left and right, it's called a logical property, kevin have a video about it.

CDL•4mo ago

This is what I'm looking for, thanks! (Ill check out the video too!)

Tok124 (CSS Nerd)•4mo ago

No problem 🙂

Gaming

Programming

How to move elements inside a container? (vague, I know)