CODEWITHSUNDEEP
htmlcss
Roy Z
Roy Z

Reputation: 117

div doesn't expand to fit content

I'm working on a top menu and the div containing the menu items doesn't seem to be stretching to fit them. I'm quite bad at CSS and rarely use it, so I apologize if it's a simple answer. Any help would be appreciated!

JSFiddle: https://jsfiddle.net/uax30g8s/9/

<div className={`${styles.topMenuDesktop}`}>
    <div className={`${styles.desktopLogo}`}>
        Logo
    </div>
    <div className={`${styles.topMenuItems}`}>
        <div className={styles.topMenuItem}>Support</div>
        <div className={styles.topMenuItem}>Pricing</div>
        <div className={styles.topMenuItem}>Blog</div>
    </div>
    <div className={`${styles.topMenuAccount}`}>
        <button className={styles.login}>Login</button>
        <button className={styles.signupTop}>Signup</button>
    </div>
</div>

css:

.topMenuDesktop {
    display: flex;
}

.desktopLogo {
    width: 20%;
    padding: 10px;
    text-align: center;
    font-weight: bold;
}

.topMenuItems {
    display: flex;
    margin-left: 8%;
}

.topMenuItem {
    margin-right: 30%;
    padding: 10px;
}

Upvotes: 1

Views: 204

Answers (1)

avia
avia

Reputation: 1578

Updated code with a few aesthetic changes.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');

* {
  padding: 0;
  margin: 0;
  font-family: 'Noto Sans', sans-serif;
}


.topMenu {
  width: 100%;margin:10px 0;
  height: 40px;
  display: flex;
}

.logo {
  width: 20%;
  padding: 10px;
  text-align: center;
  font-weight: bold;
}

.menuItems {
  display: flex;
  margin-left: 8%;width:100%;
}

.menuItem{
  margin-right: 30%;
  padding: 10px;
}

.auth {
  display:flex;
}

.auth button {
  margin:0 10px;
}
<div class="topMenu">
  <div class="logo">
    Logo
  </div>
  <div class="menuItems">
    <div class="menuItem">Item</div>
    <div class="menuItem">Item</div>
    <div class="menuItem">Item</div>
  </div>
  <div class="auth">
    <button>Login</button>
    <button>Signup</button>
  </div>
</div>

Upvotes: 1

Related Questions