I am creating a website for school and am stuck on a issue that i have looked everywhere for a solution. I am very knew to html and css so i hope im not asking something stupid. I have a row div tag with 2 div tags inside for the 2 columns as this webpage is kinda split in 2. On the column on the right i have a button that wont align to the center of the right column. For the text in that column it aligns in the center fine using display: flex and justify-content: center; but the button just wont budge. I can just use margins but when i resize the page the button stays the same.
Here is the code:
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
/* ---- Set up site grid ---- */
@media (max-width: 600px) {
.left,
.right {
width: 100%;
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: gray;
font-family: "Montserrat", sans-serif;
}
main {
grid-area: main;
background: #272727;
}
footer {
grid-area: footer;
background-color: black;
text-align: right;
color: white;
}
h1.titleH1 {
font-family: 'Montserrat', sans-serif;
font-size: 2.3vw;
padding-left: 150px;
margin: auto;
color: white;
/* -- Transform to vertically center heading */
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
img.roundleft {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
box-shadow: 1px 0px 10px #000;
float: left;
}
/*--- Navigation Bar ---*/
.wrapper {
display: grid;
grid-template-areas: 'headerLeft headerRight';
grid-template-columns: 600px 1fr;
}
.headerLeft {
text-align: left;
background-color: black;
}
.headerRight {
text-align: right;
background: linear-gradient(to left, #55524e, black);
}
.navMenu {
margin-top: 30px;
margin-right: 20px;
}
.navMenu a {
color: #f6f4e6;
text-decoration: none;
font-size: 1vw;
text-transform: uppercase;
font-weight: 500;
margin-left: 50px;
margin-right: 50px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-i n-out;
}
.navMenu a:hover {
color: #fddb3a;
}
/*---- Main Pages (Rows and Columns) ----*/
.row {
display: flex;
}
.column {
height: 800px;
}
.left {
background-color: black;
width: 50%;
float: left;
}
.right {
background: linear-gradient(to left, #55524e, #171716);
width: 50%;
float: left;
}
.homeImage {
max-width: 100%;
height: 800px;
}
h1.mainH1 {
color: white;
font-size: 2.5vw;
display: flex;
justify-content: center;
margin-top: 1em;
}
h2.mainH2 {
color: white;
font-size: 2vw;
font-family: "Montserrat", sans-serif;
display: flex;
justify-content: center;
margin-top: 20px;
}
.listItems {
color: white;
font-size: 1vw;
font-family: "Montserrat", sans-serif;
display: flex;
justify-content: center;
}
.btnQuiz {
font-family: "Montserrat", sans-serif;
background-color: #ffe31c;
border-radius: 10px;
border: none;
color: black;
padding: 11px 28px;
text-align: center;
text-decoration: none;
font-size: 16px;
display: flex;
justify-content: center;
}<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<main>
<div class="row">
<div class="column left">
<!-- Left -->
<img class="homeImage" src="images/barbell.jpg" alt="Man lifting barbell">
</div>
<div class="column right">
<!-- Right -->
<h1 class="mainH1">Welcome to the Fitness project</h1>
<h2 class="mainH2">Here you can:<br></h2>
<br>
<ul>
<li class="listItems">Learn the fundementals to fitness as well as diet</li>
<br>
<li class="listItems">Take a quiz to optimise the information for your goals</li>
<br>
<li class="listItems">Expand your knowledge with usefull body building tips</li>
</ul>
<button class="btnQuiz">Take Quiz</button>
</div>
</div>
</main>I apologies that there is a lot of CSS that is unrelated to this page. But i hope you understand my problem and any solutions are definitely appreciated.
