Why doesnt this change my button?

HTML-CSS
1

I added a border

.btn {
	display: block;
	background: #333;
	color: #fff;
	text-decoration: none;
	padding: 1em 2em;
	border: 1px solid black;
	
}

		<a class="btn" href="#section-b">Read More</a>


and why did adding <button type="button" make a div ?
2

Works fine here, make sure your style file is connected to your html file.

3

Dude, I just added button type and button:hover effects and copied my code and display:flex; justify-content: center and it made my webpage look like this: https://imgur.com/a/6wqc0Nj
it was perfectly fine. can anyone help

4

Can you also show the entire code of your index.html and the style page code?

5

Oh yeah i added some stuff

<!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">
    <title>Bootstrap Cheat Sheet</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="style.css" type="text/css">
   
  </head>
  <body>
						<!--  Header -->
		<header id="showcase" class="grid">
			<div class="bg-image"></div>
			</div class="conmtent-wrap
			<div class="bg-image">
				
			
	<h1>Welcome To My Portfolio Page</h1>
		<p>Lorem Ipsum</p>
		
			</div>
				<div class="button">
			<a class="btn" href="#section-b"><Read More</a>
				</div>
			</div>
						<!-- Main -->
	<main id="main">
						<!-- Section A -->
		<section id="section-a" class="grid">
			<div class="section-wrap">
				<h2 class="content-title">Projects</h2>
					<p>20 Lorem Ipsum Text </p>
			</div>
		</section>
		
						<!-- Section B -->
						
	<section id="section-b" class="grid">
		<ul>
			<li>
				<div>
					<img src="Comet-1.jpg" alt="">
					<div class="card-content">
						<h3 class="card-title">Web Development</h3>
						<p>Lorem</p>
					</div>
				</div>
			</li>
		
			<li>
				<div>
					<img src="astronaut.jpg" alt="">
					<div class="card-content">
						<h3 class="card-title">Responsive Projects</h3>
						<p>Lorem</p>
					</div>
				</div>
			</li>
		
			<li>
				<div>
					<img src="clouds.jpeg" alt="">
					<div class="card-content">
						<h3 class="card-title">Contact Me</h3>
						<p>Lorem</p>
					</div>
				</div>
			</li>
		</ul>
	</section>
	
					<!-- Section C -->
	<section id="section-c" class="grid">
		<div class="content-wrap">
			<h2 class="content-title">I handle all your projects </h2>
			<p>Lorem Ipsum :)</p>
		</div>
	
	</section>
					<!-- Section D -->
	<section id="section-d" class="grid">
		<div class="box">
			<h2 class="content-title">Contact Me</h2>
			<p>LOL</p>
			<p>Random Text Random Text Random Text Random Text </p>
		</div>
		
			<h2 class="content-title">About Me</h2>
			<p> Thirty Words</p>
	</section>
</main>
	
					<!-- Footer -->
	<footer id="main-footer" class="grid">
		<div>Victor K. </div>
		<div>Projects By</div>
		
	</footer>
					
  </body>
</html>

/* Body */
body {
margin: 0;
padding: 0;
font-family: Arial;
background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
color: black;
font-size:24px;
line-height: 1.5
text-align: center;
text-align: center;
}
img {
display: block;
width: 100%;
height: auto;
}
h1, h2, h3 {
margin:0;
padding: 1em 0;
}
p {
margin: 0;
padding: 1em 0;
}
.btn {
display: block;
background: #333;
color: #fff;
text-decoration: none;
padding: 1em 2em;
border: 1px solid black;
margin: .5em 0;
width: 100px;
vertical-align: middle;

}
.btn:hover {
background: #eaeaea;
width: 100px;
line-height: 1.2em;

}
.button {
display: flex;
justify-content: center;
line-height: 1.2em;

}
/* Header */
#showcase {
min-height: 450px;
color: #fff;
text-align: center;

}
#showcase.bg-image {
position: absolute;
color: #fff url(‘imagealien.jpeg’);
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 450px;
z-index: -1;
opacity: 0.4 ;
}
#showcase h1{
padding-top: 100px;
padding-bottom: 0;
}
#showcase .content-wrap {
padding: 0 1.5em;
}

6

Does anyone know how to fix this?

7

@InputLite Is this the behavior you were expecting?

8

What? What? What? What? What? What? What? asdasd

9

@InputLite I found some typos in your header that was causing the error… read the comments I put in your code

<header id="showcase" class="grid">
    <div class="bg-image"></div>
    <!-- the next tag should not have a / because is opening a div, the class is misspelled and missing a " 
        and the tag is missing a > -->
    </div class="conmtent-wrap
    <div class="bg-image">
        
    
<h1>Welcome To My Portfolio Page</h1>
<p>Lorem Ipsum</p>

    </div>
        <div class="button">
    <a class="btn" href="#section-b"><Read More</a> <!-- here before the read me you have a unnecessary < -->
        </div>
    </div>
<!-- missing a closing tag for header -->

So your code should look like this:

<!--  Header -->
	<header id="showcase" class="grid">
		<div class="bg-image"></div>
        <div class="content-wrap">
            <div class="bg-image">
                <h1>Welcome To My Portfolio Page</h1>
                <p>Lorem Ipsum</p>
            </div>
            
            <div class="button">
                <a class="btn" href="#section-b">Read More</a>
            </div>
        </div>
    </header>