CODEWITHSUNDEEP
htmlcss
MdeGraaff
MdeGraaff

Reputation: 124

Buttons won't align css/html

My buttons won't align next to each other and I don't know if its a `HTML or CSS issue. As stated before I want to have the buttons next to each other and not under each other. I've tried the !important tag but that doesn't work either. If you know how to fix this issue please help me out! Thanks in advance!

body {
  margin: 0;
  background-color: #cccaca;
}

/* Add a black background color to the top navigation */
.topnav {
    color: #333;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
  }
  
/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #333;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: Arial, Helvetica, sans-serif;
}
  
/* Change the color of links on hover */
.topnav a:hover {
  color: #ddd;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
}
  
/* Add a color to the active/current link */
.topnav a.active {
  color: #222;
  font-family: Arial, Helvetica, sans-serif;
}

.spacer-top {
  margin-top: 70px;
}

.spacer-topnav {
  margin-top: 15px;
}

.Spacer-Nav-To-Content {
  margin-top: 50px !important;
}

@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400');
 @import url('https://fonts.googleapis.com/css?family=Roboto:100');
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 .header {
     text-align: center;
     font-family: 'Roboto', sans-serif;
     font-size: 34px;
     margin-top: 12vh;
}
 .footer {
     text-align: center;
     font-family: 'Lato', sans-serif;
     font-weight: 300;
     font-size: 20px;
     margin-top: 15vh;
}
 .button-container-1 {
     position: relative;
     width: 100px;
     height: 50px;
     margin-left: auto;
     margin-right: auto;
     margin-top: 6vh;
     overflow: hidden;
     border: 1px solid;
     font-family: 'Lato', sans-serif;
     font-weight: 300;
     font-size: 20px;
     transition: 0.5s;
     letter-spacing: 1px;
     border-radius: 8px;
}
 .button-container-1 button {
     width: 101%;
     height: 100%;
     font-family: 'Lato', sans-serif;
     font-weight: 300;
     font-size: 11px;
     letter-spacing: 1px;
     font-weight: bold;
     background: #000;
     -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
     mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
     -webkit-mask-size: 2300% 100%;
     mask-size: 2300% 100%;
     border: none;
     color: #fff;
     cursor: pointer;
     -webkit-animation: ani2 0.7s steps(22) forwards;
     animation: ani2 0.7s steps(22) forwards;
}
 .button-container-1 button:hover {
     -webkit-animation: ani 0.7s steps(22) forwards;
     animation: ani 0.7s steps(22) forwards;
}
 .button-container-2 {
     position: relative;
     width: 100px;
     height: 50px;
     margin-left: auto;
     margin-right: auto;
     margin-top: 7vh;
     overflow: hidden;
     border: 1px solid #000;
     font-family: 'Lato', sans-serif;
     font-weight: 300;
     transition: 0.5s;
     letter-spacing: 1px;
     border-radius: 8px;
}
 .button-container-2 button {
     width: 101%;
     height: 100%;
     font-family: 'Lato', sans-serif;
     font-weight: 300;
     font-size: 11px;
     letter-spacing: 1px;
     font-weight: bold;
     background: #000;
     -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/urban-sprite.png");
     mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/urban-sprite.png");
     -webkit-mask-size: 3000% 100%;
     mask-size: 3000% 100%;
     border: none;
     color: #fff;
     cursor: pointer;
     -webkit-animation: ani2 0.7s steps(29) forwards;
     animation: ani2 0.7s steps(29) forwards;
}
 .button-container-2 button:hover {
     -webkit-animation: ani 0.7s steps(29) forwards;
     animation: ani 0.7s steps(29) forwards;
}
 .mas {
     position: absolute;
     color: #000;
     text-align: center;
     width: 101%;
     font-family: 'Lato', sans-serif;
     font-weight: 300;
     position: absolute;
     font-size: 11px;
     margin-top: 17px;
     overflow: hidden;
     font-weight: bold;
}
 @-webkit-keyframes ani {
     from {
         -webkit-mask-position: 0 0;
         mask-position: 0 0;
    }
     to {
         -webkit-mask-position: 100% 0;
         mask-position: 100% 0;
    }
}
 @keyframes ani {
     from {
         -webkit-mask-position: 0 0;
         mask-position: 0 0;
    }
     to {
         -webkit-mask-position: 100% 0;
         mask-position: 100% 0;
    }
}
 @-webkit-keyframes ani2 {
     from {
         -webkit-mask-position: 100% 0;
         mask-position: 100% 0;
    }
     to {
         -webkit-mask-position: 0 0;
         mask-position: 0 0;
    }
}
 @keyframes ani2 {
     from {
         -webkit-mask-position: 100% 0;
         mask-position: 100% 0;
    }
     to {
         -webkit-mask-position: 0 0;
         mask-position: 0 0;
    }
}
 a {
     color: #00ff95;
}
 .button-container-3 {
     position: relative;
     width: 100px;
     height: 50px;
     margin-left: auto;
     margin-right: auto;
     margin-top: 8vh;
     overflow: hidden;
     border: 1px solid #000;
     font-family: 'Lato', sans-serif;
     font-weight: 300;
     transition: 0.5s;
     letter-spacing: 1px;
     border-radius: 8px;
}
 .button-container-3 button {
     width: 101%;
     height: 100%;
     font-family: 'Lato', sans-serif;
     font-weight: 300;
     font-size: 11px;
     letter-spacing: 1px;
     font-weight: bold;
     background: #000;
     -webkit-mask: url("https://raw.githubusercontent.com/pizza3/asset/master/natureSmaller.png");
     mask: url("https://raw.githubusercontent.com/pizza3/asset/master/natureSmaller.png");
     -webkit-mask-size: 7100% 100%;
     mask-size: 7100% 100%;
     border: none;
     color: #fff;
     cursor: pointer;
     -webkit-animation: ani2 0.7s steps(70) forwards;
     animation: ani2 0.7s steps(70) forwards;
}
 .button-container-3 button:hover {
     -webkit-animation: ani 0.7s steps(70) forwards;
     animation: ani 0.7s steps(70) forwards;
}
<!DOCTYPE html>
<html>
<header>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    
</header>
<body>
    <div class="spacer-top"></div>
    <div class="container">
    <div class="row">
        <div class="col-md-auto">
            <h3>Mark de Graaff</h3>
            <h4>Developer</h4>
        </div>
        <div class="col-sm-8">
            <!--TOPNAV-->
            <div class="topnav spacer-topnav">
                <a class="active" href="#home">Home</a>
                <a href="#news">CV/Resumé</a>
                <a href="#projects">Projects</a>
                <a href="#contact">Contact</a>
                <a href="#about">About</a>
            </div>
        </div>
    </div>
    </div>
    <div class="Spacer-Nav-To-Content"></div>
    <div class="container">
    <div class="row">
        <div class="col-md-auto">
            <img src="images/Profile_foto.png" alt="Profile Picture">
        </div>
        <div class="col-6">
            <h2><b>Hello,</b></h2>
            <h3><i>Here is a bit about me:</i></h3>
            <div class="row">
                <div class="col-6">
                <div class="button-container-3">
                    <span class="mas">MASK3</span>
                    <button type="button" name="Hover">MASK3</button>
                </div>
                <div class="col-6">
                <div class="button-container-3">
                    <span class="mas">MASK3</span>
                    <button type="button" name="Hover">MASK3</button>
                </div>
                <div class="col-6">
                <div class="button-container-3">
                    <span class="mas">MASK3</span>
                    <button type="button" name="Hover">MASK3</button>
                </div>
                </div>
            </div>
        </div>
    </div>
    </div>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>

Upvotes: 3

Views: 91

Answers (1)

Obzi
Obzi

Reputation: 2390

None of your <div class="col-6"> are correcty closed.

body {
  margin: 0;
  background-color: #cccaca;
}

/* Add a black background color to the top navigation */
.topnav {
    color: #333;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
  }
  
/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #333;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: Arial, Helvetica, sans-serif;
}
  
/* Change the color of links on hover */
.topnav a:hover {
  color: #ddd;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
}
  
/* Add a color to the active/current link */
.topnav a.active {
  color: #222;
  font-family: Arial, Helvetica, sans-serif;
}

.spacer-top {
  margin-top: 70px;
}

.spacer-topnav {
  margin-top: 15px;
}

.Spacer-Nav-To-Content {
  margin-top: 50px !important;
}

@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400');
 @import url('https://fonts.googleapis.com/css?family=Roboto:100');
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 .header {
     text-align: center;
     font-family: 'Roboto', sans-serif;
     font-size: 34px;
     margin-top: 12vh;
}
 .footer {
     text-align: center;
     font-family: 'Lato', sans-serif;
     font-weight: 300;
     font-size: 20px;
     margin-top: 15vh;
}
 .button-container-1 {
     position: relative;
     width: 100px;
     height: 50px;
     margin-left: auto;
     margin-right: auto;
     margin-top: 6vh;
     overflow: hidden;
     border: 1px solid;
     font-family: 'Lato', sans-serif;
     font-weight: 300;
     font-size: 20px;
     transition: 0.5s;
     letter-spacing: 1px;
     border-radius: 8px;
}
 .button-container-1 button {
     width: 101%;
     height: 100%;
     font-family: 'Lato', sans-serif;
     font-weight: 300;
     font-size: 11px;
     letter-spacing: 1px;
     font-weight: bold;
     background: #000;
     -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
     mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
     -webkit-mask-size: 2300% 100%;
     mask-size: 2300% 100%;
     border: none;
     color: #fff;
     cursor: pointer;
     -webkit-animation: ani2 0.7s steps(22) forwards;
     animation: ani2 0.7s steps(22) forwards;
}
 .button-container-1 button:hover {
     -webkit-animation: ani 0.7s steps(22) forwards;
     animation: ani 0.7s steps(22) forwards;
}
 .button-container-2 {
     position: relative;
     width: 100px;
     height: 50px;
     margin-left: auto;
     margin-right: auto;
     margin-top: 7vh;
     overflow: hidden;
     border: 1px solid #000;
     font-family: 'Lato', sans-serif;
     font-weight: 300;
     transition: 0.5s;
     letter-spacing: 1px;
     border-radius: 8px;
}
 .button-container-2 button {
     width: 101%;
     height: 100%;
     font-family: 'Lato', sans-serif;
     font-weight: 300;
     font-size: 11px;
     letter-spacing: 1px;
     font-weight: bold;
     background: #000;
     -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/urban-sprite.png");
     mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/urban-sprite.png");
     -webkit-mask-size: 3000% 100%;
     mask-size: 3000% 100%;
     border: none;
     color: #fff;
     cursor: pointer;
     -webkit-animation: ani2 0.7s steps(29) forwards;
     animation: ani2 0.7s steps(29) forwards;
}
 .button-container-2 button:hover {
     -webkit-animation: ani 0.7s steps(29) forwards;
     animation: ani 0.7s steps(29) forwards;
}
 .mas {
     position: absolute;
     color: #000;
     text-align: center;
     width: 101%;
     font-family: 'Lato', sans-serif;
     font-weight: 300;
     position: absolute;
     font-size: 11px;
     margin-top: 17px;
     overflow: hidden;
     font-weight: bold;
}
 @-webkit-keyframes ani {
     from {
         -webkit-mask-position: 0 0;
         mask-position: 0 0;
    }
     to {
         -webkit-mask-position: 100% 0;
         mask-position: 100% 0;
    }
}
 @keyframes ani {
     from {
         -webkit-mask-position: 0 0;
         mask-position: 0 0;
    }
     to {
         -webkit-mask-position: 100% 0;
         mask-position: 100% 0;
    }
}
 @-webkit-keyframes ani2 {
     from {
         -webkit-mask-position: 100% 0;
         mask-position: 100% 0;
    }
     to {
         -webkit-mask-position: 0 0;
         mask-position: 0 0;
    }
}
 @keyframes ani2 {
     from {
         -webkit-mask-position: 100% 0;
         mask-position: 100% 0;
    }
     to {
         -webkit-mask-position: 0 0;
         mask-position: 0 0;
    }
}
 a {
     color: #00ff95;
}
 .button-container-3 {
     position: relative;
     width: 100%;
     height: 50px;
     margin-left: auto;
     margin-right: auto;
     margin-top: 8vh;
     overflow: hidden;
     border: 1px solid #000;
     font-family: 'Lato', sans-serif;
     font-weight: 300;
     transition: 0.5s;
     letter-spacing: 1px;
     border-radius: 8px;
}
 .button-container-3 button {
     width: 101%;
     height: 100%;
     font-family: 'Lato', sans-serif;
     font-weight: 300;
     font-size: 11px;
     letter-spacing: 1px;
     font-weight: bold;
     background: #000;
     -webkit-mask: url("https://raw.githubusercontent.com/pizza3/asset/master/natureSmaller.png");
     mask: url("https://raw.githubusercontent.com/pizza3/asset/master/natureSmaller.png");
     -webkit-mask-size: 7100% 100%;
     mask-size: 7100% 100%;
     border: none;
     color: #fff;
     cursor: pointer;
     -webkit-animation: ani2 0.7s steps(70) forwards;
     animation: ani2 0.7s steps(70) forwards;
}
 .button-container-3 button:hover {
     -webkit-animation: ani 0.7s steps(70) forwards;
     animation: ani 0.7s steps(70) forwards;
}
<!DOCTYPE html>
<html>
<header>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    
</header>
<body>
    <div class="spacer-top"></div>
    <div class="container">
    <div class="row">
        <div class="col-md-auto">
            <h3>Mark de Graaff</h3>
            <h4>Developer</h4>
        </div>
        <div class="col-sm-8">
            <!--TOPNAV-->
            <div class="topnav spacer-topnav">
                <a class="active" href="#home">Home</a>
                <a href="#news">CV/Resumé</a>
                <a href="#projects">Projects</a>
                <a href="#contact">Contact</a>
                <a href="#about">About</a>
            </div>
        </div>
    </div>
    </div>
    <div class="Spacer-Nav-To-Content"></div>
    <div class="container">
    <div class="row">
        <div class="col-md-auto">
            <img src="images/Profile_foto.png" alt="Profile Picture">
        </div>
        <div class="col-6">
            <h2><b>Hello,</b></h2>
            <h3><i>Here is a bit about me:</i></h3>
            <div class="row mx-0">
                <div class="col-12 col-sm-4 pl-0 pr-1">
                    <div class="button-container-3">
                        <span class="mas">MASK3</span>
                        <button type="button" name="Hover">MASK3</button>
                    </div>
                </div>
                <div class="col-12 col-sm-4 px-0">
                    <div class="button-container-3">
                        <span class="mas">MASK3</span>
                        <button type="button" name="Hover">MASK3</button>
                    </div>
                </div>
                <div class="col-12 col-sm-4 pl-1 pr-0">
                    <div class="button-container-3">
                        <span class="mas">MASK3</span>
                        <button type="button" name="Hover">MASK3</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>

Edit: Changes

HTML

<div class="row">
    <div class="col-6">
        <div class="button-container-3">
            <span class="mas">MASK3</span>
            <button type="button" name="Hover">MASK3</button>
        </div>
    </div>
    <div class="col-6">
        <div class="button-container-3">
            <span class="mas">MASK3</span>
            <button type="button" name="Hover">MASK3</button>
        </div>
    </div>
    <div class="col-6">
        <div class="button-container-3">
            <span class="mas">MASK3</span>
            <button type="button" name="Hover">MASK3</button>
        </div>
    </div>
</div>

Into

<div class="row mx-0">
    <div class="col-12 col-sm-4 pl-0 pr-1">
        <div class="button-container-3">
            <span class="mas">MASK3</span>
            <button type="button" name="Hover">MASK3</button>
        </div>
    </div>
    <div class="col-12 col-sm-4 px-0">
        <div class="button-container-3">
            <span class="mas">MASK3</span>
            <button type="button" name="Hover">MASK3</button>
        </div>
    </div>
    <div class="col-12 col-sm-4 pl-1 pr-0">
        <div class="button-container-3">
            <span class="mas">MASK3</span>
            <button type="button" name="Hover">MASK3</button>
        </div>
    </div>
</div>

CSS

.button-container-3 {
    width: 100px;
}

Into

.button-container-3 {
    width: 100%;
}

Upvotes: 2

Related Questions