Text is not moving and not getting formatted

Question

I am unable to move the caption text to the center of the background image and text in the new div is not only moving but formatted. The text on the image is not at all moving and not only the it's not formatting according the code given in the css. The text in the next div is also not moving and getting formatted.

html

<div class="container1">
<div class="banner">
<div class="banner-text">
<h1> Our shop can be found at </br>
Park Avenue,Street No.1, SF, California </h1>
</div>
</div>
<div class="container2">
<div class="menu">
<h1> Menu </h1>
<p> Donec dapibus rhoncus blandit. Nam eu scelerisque augue. Suspendisse hendrerit rutrum maximus. Fusce elementum rhoncus felis sed elementum. Aenean ultricies, nulla vel scelerisque commodo, 
felis eros hendrerit lectus, a porttitor metus massa in nibh. Vivamus egestas placerat quam nec laoreet. Nulla id semper turpis. Integer et imperdiet lacus. Nam ac condimentum neque. Suspendisse luctus porttitor purus, 
ac fermentum quam scelerisque eu. Proin eget pulvinar lectus. Duis maximus massa vitae tellus efficitur, et pharetra ex aliquam. Quisque fringilla diam sodales pellentesque condimentum </p>
</div>

css code

.container1 {
width:100%;
margin:0 auto;
margin-top:500px;
}

.banner {
position:relative;
background-image:url('c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/social/california.jpg');
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
padding-top:25%;
width:100%;
z-index:-1;
}

.banner-text h1[
position:absolute;
font-family:Javanese Text, Arial, sans-serif;
font-weight:bold;
font-size:100%;
color:#fff;
margin-left:150px;
text-align:center;
transform:translate(-50% -50%);
}

.container2 {
width:100%;
}

.menu, 
.images {
width:auto;
float:none;
}

.menu {
width:50%;
float:left;
}

.menu h1 {
font-family:Javanese Text, Arial, sans-serif;
font-weight:bold;
font-size:100%;
margin-left:200px;
}

Answer 1

sai sankar you have to careful when you're writing css. Because if a single character is missed, the code will not work.

In .banner-text h1[ this line

change [ to {

Answer 2

I think it would be better if you attached the link to the demo(ex https://jsfiddle.net ). As I can see at the first glance, you have a typo:

.banner-text h1 [                  // should be {
position:absolute;
font-family:Javanese Text, Arial, sans-serif;
font-weight:bold;
font-size:100%;
color:red;
margin-left:150px;
text-align:center;
transform:translate(-50% -50%);
}