Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Anchor Tag Within Div Feels Like Not Part Of The Div

Post a Comment
I am working on a project for school and I am making a section 50% being some text and an anchor tag and 50% being an image. So the section is a bit weird, the anchor tag is not go

Solution 1:

your h1 margin: 0% is overriding your margin property in the anchor.


Solution 2:

I cleaned up your css. Now you can give margin property without changing size of the div

.make-account {
    height: 100%;
    width: 50%;
    margin-top: 0.5%;
    background-color: #EBCEBF;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}

.make-account h1 {
    text-align: center;
    color: #FDF8F5;
}

.make-account a {
    color: #FDF8F5;
    background-color: #266150;
    padding: 1% 3% 1% 3%;
    margin-bottom: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<header>
        <nav>
            <span class="branding">SportBuddy</span>
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Find People</a></li>
                <li><a href="#">My Friends</a></li>
                <li class="dropdown"><a href="#">Account</a></li>
                <!-- <li class="account"><a href="#"><img src="img/account.png"></a></li> -->
            </ul>
        </nav>
    </header>

    <div class="make-account">
        <h1>WE HELP YOU FIND YOUR OWN SPORTBUDDY!</h1>

        <a href="#">MAKE AN ACCOUNT</a>
    </div>

</body>
</html>

You may like these posts

Post a Comment for "Anchor Tag Within Div Feels Like Not Part Of The Div"