How to align the text in a flex with logos-CodePudding

I have been trying to make a duplicate of twitter for practice and I am stuck at a problem. I have a flex row and it contains a logo and a text. I want to align the text just like the logos are aligned. Please refer to the picture below. As you can see all the logos are aligned but the text is not aligned. I have tried adding flex-direction: row; and specifying the row-gap but it didn't work. I also tried using flex-direction: column incase it could give me my desired output but as soon as I enter flex-direction:column the logo and the text move to separate lines. Is there a simple way to align the text? Also, if you run the snippet and hover over each logo, you would notice that the background color changes and for every logo the padding is different for text written with the logo. The padding for the logo is alright. How can I make the margin so that the padding remains the same for both the logo and the text?

Find my code below.

*{
    margin: 0;
    padding: 0;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
#container{
    width: 25%;
    height: 100vh;
    border-right: 1px solid rgb(0, 0, 0);
    position: absolute;
}
#logo{
    display: flex;
    font-size: 25px;
    padding-top: 10px;
    margin-left: 50px;
    margin-right: 10em;
}
.fab{
    cursor: pointer;
}
#navlinks{
    display: flex;
    margin-top: 1em;
}
#home{
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    border-radius: 30px;
    height: 50px;
    align-items: center;
    cursor: pointer;
    flex-direction: row;
}
.logohome{
    font-size: 20px;
    padding-left: 10px;
    flex: 50%;
}
.texthome{
    font-size: 20px;
    margin-left:2em;
    padding-right: 10px;
    flex: 50%;
}
#home:hover{
    background-color: rgba(0, 0, 0, 0.192);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#hashtag{
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    border-radius: 30px;
    height: 50px;
    align-items: center;
    margin-right: 9em;
    cursor: pointer;
    flex-direction: row;
    row-gap: 20px;
}
.hashlogo{
    font-size: 20px;
    padding-left: 10px;
}
.hashtext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}
#hashtag:hover{
    background-color: rgba(0, 0, 0, 0.192);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#notification{
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    border-radius: 30px;
    height: 50px;
    align-items: center;
    margin-right: 5.8em;
    cursor: pointer;
}
.notilogo{
    font-size: 20px;
    padding-left: 10px;
}
.notitext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}
#notification:hover{
    background-color: rgba(0, 0, 0, 0.192);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#messages{
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    border-radius: 30px;
    height: 50px;
    align-items: center;
    margin-right: 5.8em;
    cursor: pointer;
}
.msglogo{
    font-size: 20px;
    padding-left: 10px;
}
.msgtext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}
#messages:hover{
    background-color: rgba(0, 0, 0, 0.192);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#bookmark{
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    border-radius: 30px;
    height: 50px;
    align-items: center;
    margin-right: 5.8em;
    cursor: pointer;
}
.bkmrklogo{
    font-size: 20px;
    padding-left: 10px;
}
.bkmrktext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}
#bookmark:hover{
    background-color: rgba(0, 0, 0, 0.192);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#lists{
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    border-radius: 30px;
    height: 50px;
    align-items: center;
    margin-right: 5.8em;
    cursor: pointer;
}
.listslogo{
    font-size: 20px;
    padding-left: 10px;
}
.liststext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}
#lists:hover{
    background-color: rgba(0, 0, 0, 0.192);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#profile{
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    border-radius: 30px;
    height: 50px;
    align-items: center;
    margin-right: 5.8em;
    cursor: pointer;
}
.profilelogo{
    font-size: 20px;
    padding-left: 10px;
}
.profiletext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}
#profile:hover{
    background-color: rgba(0, 0, 0, 0.192);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#more{
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    border-radius: 30px;
    height: 50px;
    align-items: center;
    margin-right: 5.8em;
    cursor: pointer;
}
.r-1fmj7o5{
    height: 23px;
    width: 25px;
    margin-left: -4px;
    margin-top: 6px;
}
.morelogo{
    padding-left: 10px;
}
.moretext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}
#more:hover{
    background-color: rgba(0, 0, 0, 0.192);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#twtbtn{
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    border-radius: 30px;
    height: 50px;
    align-items: center;
    margin-right: 5.8em;
}
button{
    margin-top: 20px;
    height: 50px;
    width: 15em;
    border-radius: 30px;
    background-color: rgb(112, 112, 245);
    border: none;
    color: white;
    font-size: 1em;
    font-weight: 900;
    cursor: pointer;
}
button:hover{
    background-color: rgb(130, 130, 252);
}
#middlecontainer{
    height: 100vh;
    width: 50%;
    position: relative;
    margin-left: 22em;
    border-right: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="twitter.css">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous" />
</head>

<body>
    <div id="container">
        <div id="logo">
            <i class="fab fa-twitter"></i>
        </div>
        <div id="navlinks">
            <div id="home">
                <div class="logohome"><i class="fas fa-home"></i></div>
                <div class="texthome"><h4>Home</h4></div>
            </div>
        </div>
        <div id="hashtag">
            <div class="hashlogo"><i class="fas fa-hashtag"></i></div>
            <div class="hashtext"><h4>Explore</h4></div>
        </div>
        <div id="notification">
            <div class="notilogo"><i class="far fa-bell"></i></div>
            <div class="notitext"><h4>Notifications</h4></div>
        </div>
        <div id="messages">
            <div class="msglogo"><i class="far fa-envelope"></i></div>
            <div class="msgtext"><h4>Messages</h4></div>
        </div>
        <div id="bookmark">
            <div class="bkmrklogo"><i class="far fa-bookmark"></i></div>
            <div class="bkmrktext"><h4>Bookmark</h4></div>
        </div>
        <div id="lists">
            <div class="listslogo"><i class="far fa-list-alt"></i></div>
            <div class="liststext"><h4>Lists</h4></div>
        </div>
        <div id="profile">
            <div class="profilelogo"><i class="far fa-user"></i></i></div>
            <div class="profiletext"><h4>Profile</h4></div>
        </div>
        <div id="more">
            <div class="morelogo"><svg viewBox="0 0 24 24" aria-hidden="true" class="r-1fmj7o5 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><circle cx="17" cy="12" r="1.5"></circle><circle cx="12" cy="12" r="1.5"></circle><circle cx="7" cy="12" r="1.5"></circle><path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></g></svg></div>
            <div class="moretext"><h4>More</h4></div>
        </div>
        <div id="twtbtn">
            <div class="button"><button type="submit" value="Tweet">Tweet</button></div>
        </div>
    </div>
    <div id="middlecontainer">
        <nav id="navbar">
            <h1></h1>
        </nav>
    </div>
</body>

</html>

CodePudding user response：

I couldn't understand why you used different class names?! But your problem will be fix if you set an specific width size to your div

For example:

.logohome,.hashlogo{
  width:20px;
 }

CodePudding user response：

*{
    margin: 0;
    padding: 0;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
#container{
    width: 25%;
    height: 100vh;
    border-right: 1px solid rgb(0, 0, 0);
    position: absolute;
}
#logo{
    display: flex;
    font-size: 25px;
    padding-top: 10px;
    margin-left: 50px;
    margin-right: 10em;
}
.fab{
    cursor: pointer;
}
#navlinks{
    display: flex;
    margin-top: 1em;
    flex-direction:column;
    min-width:250px;
}
#navlinks>div{
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    border-radius: 30px;
    height: 50px;
    align-items: center;
    cursor: pointer;
    flex-direction: row;
}
#navlinks>div:hover{
    background-color: rgba(0, 0, 0, 0.192);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.logohome{
    font-size: 20px;
    padding-left: 10px;
    width:20px;
}
.texthome{
    font-size: 20px;
    margin-left:2em;
    padding-right: 10px;
}
.hashlogo{
    font-size: 20px;
    padding-left: 10px;
    width:20px;
}
.hashtext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}
.notilogo{
    font-size: 20px;
    padding-left: 10px;
}
.notitext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}

.msglogo{
    font-size: 20px;
    padding-left: 10px;
}
.msgtext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}

.bkmrklogo{
    font-size: 20px;
    padding-left: 10px;
}
.bkmrktext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}

.listslogo{
    font-size: 20px;
    padding-left: 10px;
}
.liststext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}

.profilelogo{
    font-size: 20px;
    padding-left: 10px;
}
.profiletext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}

.r-1fmj7o5{
    height: 23px;
    width: 25px;
    margin-left: -4px;
    margin-top: 6px;
}
.morelogo{
    padding-left: 10px;
}
.moretext{
    font-size: 20px;
    margin-left: 2em;
    padding-right: 10px;
}

#twtbtn{
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    border-radius: 30px;
    height: 50px;
    align-items: center;
    margin-right: 5.8em;
}
button{
    margin-top: 20px;
    height: 50px;
    width: 15em;
    border-radius: 30px;
    background-color: rgb(112, 112, 245);
    border: none;
    color: white;
    font-size: 1em;
    font-weight: 900;
    cursor: pointer;
}
button:hover{
    background-color: rgb(130, 130, 252);
}
#middlecontainer{
    height: 100vh;
    width: 50%;
    position: relative;
    margin-left: 22em;
    border-right: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="twitter.css">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous" />
</head>

<body>
    <div id="container">
        <div id="logo">
            <i class="fab fa-twitter"></i>
        </div>
        <div id="navlinks">
            <div id="home">
                <div class="logohome"><i class="fas fa-home"></i></div>
                <div class="texthome"><h4>Home</h4></div>
            </div>
        
        <div id="hashtag">
            <div class="hashlogo"><i class="fas fa-hashtag"></i></div>
            <div class="hashtext"><h4>Explore</h4></div>
        </div>
        <div id="notification">
            <div class="notilogo"><i class="far fa-bell"></i></div>
            <div class="notitext"><h4>Notifications</h4></div>
        </div>
        <div id="messages">
            <div class="msglogo"><i class="far fa-envelope"></i></div>
            <div class="msgtext"><h4>Messages</h4></div>
        </div>
        <div id="bookmark">
            <div class="bkmrklogo"><i class="far fa-bookmark"></i></div>
            <div class="bkmrktext"><h4>Bookmark</h4></div>
        </div>
        <div id="lists">
            <div class="listslogo"><i class="far fa-list-alt"></i></div>
            <div class="liststext"><h4>Lists</h4></div>
        </div>
        <div id="profile">
            <div class="profilelogo"><i class="far fa-user"></i></i></div>
            <div class="profiletext"><h4>Profile</h4></div>
        </div>
        <div id="more">
            <div class="morelogo"><svg viewBox="0 0 24 24" aria-hidden="true" class="r-1fmj7o5 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><circle cx="17" cy="12" r="1.5"></circle><circle cx="12" cy="12" r="1.5"></circle><circle cx="7" cy="12" r="1.5"></circle><path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></g></svg></div>
            <div class="moretext"><h4>More</h4></div>
        </div>
        </div>
        <div id="twtbtn">
            <div class="button"><button type="submit" value="Tweet">Tweet</button></div>
        </div>
    </div>
    <div id="middlecontainer">
        <nav id="navbar">
            <h1></h1>
        </nav>
    </div>
</body>

</html>

CodePudding user response：

I am not sure if this would help, but I would try to put both the text and logo div tags in one block-level element (I have found that putting it in a

tag works pretty well.) After that you could align them inside that...