Media Query will not work

HTML-CSS
1

I have googled all night, put in other peoples coding, nothing will register or take affect. I am simply just trying to start out with aligning my top picture to the center on my website. Listed is my Index.html, stylesheet.css, and bodystylesheet.css. My media querry’s are in the stylesheet.css.

<!DOCTYPE html5>
<html>
<head>
<link rel="stylesheet" href="CSS\StyleSheet.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS\BodyStyleSheet.css">
</head>
<body>
<title>
    All for the Labrador Retriever
</title>
<h1 id=image-title>This is My Chocolate Lab, Her Name is Zoe!</h1>
<img id="Zoe" src="Images\Zoe.jpg"
  alt="Dog laying on her back with her tongue hanging out while smiling">

<!--StyleSheet.css-->

#image-title {
  position: relative;
  top: 75px;
  font-size: 35px;
  text-align: center;
  left: 15px;
  color: rgb(0,0,0)
}
#Zoe {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  height: 200px;
{
@media only screen (min-width : 320px) and (max-width : 568px) 
  #Zoe {
    display: block;
    text-align: center;
}
#zoe-pic-text {
  display: center;
  font-size: 15px;
  text-align: center;
  color: rgb(255, 253, 208)
}

<!--BodystyleSheet.css-->

body {
  background-color: rgb(45, 22, 6)
}
.headings {
  font-size: 30px;
  text-align: center;
  color: rgb(255, 253, 208)
}
.headings1 {
  position: relative;
  bottom: 15px;
  font-size: 20px;
  text-align: center;
  color: rgb(0, 0, 0)
}
.container1 {
  position: relative;
  top: 75px;
  font-size: 30px;
  text-align: center;
  color: rgb(255, 253, 208)
}
p {
  padding: 30px;
  font-size: 25px;
  width: 1150px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  text-indent: 70px;
  line-height: 1.6;
  color: rgb(255, 253, 208)
}
a:link {
  color: orange;
}
a:visited {
  color: grey;
}
2

When using jsfiddle, I clearly see mistyping and other errors. And often while doing the jsfiddle, the problem is solved meanwhile.

3

I have no idea what is happening. I copy pasted from my files and things are different. Apart from the errors, can you just show me how to link a media querry and align a picture please?

4

Hey, if you need picture in center of your website just use something like this :
#Zoe { width: 50%; position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); }
And this is for Media Query

5

I feel soooooooooo stupid right now. I read online that github updates the website within seconds of making changes. I just deleted the stupid pic out of the file and it remained online… I timed how long the changes take and it is just shy of 60 seconds… This entire time I was trying stuff I thought it wasn’t doing anything when in-fact I don’t know because of the update delay!!! (－‸ლ)

6

Thank you so much I will try that! :slight_smile: