Code css en conflit!

Bonjour,

J'ai inséré un code css pour effectuer un effet d'image fixe sur mon site, néanmoins, celui-ci rentre en conflit avec un autre de mes codes.
j'ai un décalage au niveau du texte p.
Mon texte est décalé. Je mets le code pour que vous comprenez mieux:

/*code parcours artistique*/
h2{
  color:#000;
  font-family: 'raleway', time, sans-serif;
  font-size:400;
    
}
   
  h2 span {
   font-family: 'raleway', time, sans-serif;
  font-weight: inherit;
   font-weight: bold;
  font-weight: 500;
   color:#000;
}
  
p {
  margin-right: 50px;
  margin-left:50px;
  font-weight: normal;
    font-family: 'Josefin Sans', sans-serif;
font-size:400;
   
}
 
#partistique {
 
  font-weight: normal;
 text-align:center;
 color:#000;
 background-image:url(http://image1.jpg);
 background-position:center center;
 background-repeat:none;
 background-size:cover;
 -o-background-size:cover;
 background-attachment:fixed;
 box-shadow:inset 0 0 10px 0 #000
}
#partistique .container {
 padding:100px 0;
 background-image:linear-gradient(to right bottom,rgba(28,178,189,0.71) 0%,rgba(173,56,228,0.7) 100%)
     
}
 
@media only screen and (max-width:500px) {
 .partistique-content {
  -ms-flex-wrap:wrap;
  flex-wrap:wrap
 }
}

/*code Boutique en Ligne*/

#imagefixe1 {
  font-family: raleway, time, sans-serif;
  font-weight: normal;
 text-align:center;
 color:#000;
 background-image:url(http://image2.jpg);
 background-position:center center;
 background-repeat:no-repeat;
 background-size:800px;
 -o-background-size:800px;
 background-attachment:fixed;
}
#cv .container {
 padding:60px 0;
}
 
@media only screen and (max-width:400px) {
 .cv-content {
  -ms-flex-wrap:wrap;
  flex-wrap:wrap
 }
}

2 eme code avec effet au survol de la souris. Trait devient croix au survol de la souris, mais du coup, avec le code précédent, le texte est décalé vers la droite. Comment faire pour le recentrer? Dois je ajouter une class?

figure.effect-romeo h3 {font-size:20px;  }

figure.effect-romeo {position: relative;font-size: 18px; font-family: 'Raleway', sans-serif; width : 100%; max-width: 336px; height: 336px; text-align: center; vertical-align: middle; color: #000; margin: 0; }

figure.effect-romeo img{width : 100%; max-width: 336px; height: 336px;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}

 figure.effect-romeo:hover img{width : 100%; max-width: 336px; height: 336px; opacity:.6;-webkit-transform:scale3d(1,1,1);transform:translate3d(1,1,1)}
 
 figure.effect-romeo figcaption::before,figure.effect-romeo figcaption::after{position:absolute;top:48%;left:50%;width:80%;height:1px;background:#000;content:'';-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}
 
 figure.effect-romeo:hover figcaption::before{opacity:.5;-webkit-transform:translate3d(-50%,-50%,0) rotate(45deg);transform:translate3d(-50%,-50%,0) rotate(45deg)}
 
 figure.effect-romeo:hover figcaption::after{opacity:.5;-webkit-transform:translate3d(-50%,-50%,0) rotate(-45deg);transform:translate3d(-50%,-50%,0) rotate(-45deg)}
 
 figure.effect-romeo h3,figure.effect-romeo p{position:absolute;top:45%;left:0;width:100%;-webkit-transition:-webkit-transform .35s;transition:transform .35s}
 
 figure.effect-romeo h3{-webkit-transform:translate3d(0,-50%,0) translate3d(0,-150%,0);transform:translate3d(0,-50%,0) translate3d(0,-150%,0)}
 
 figure.effect-romeo p{-webkit-transform:translate3d(0,-50%,0)
 translate3d(0,50%,0);transform:translate3d(0,-60%,0) translate3d(0,60%,0)}}
 
 figure.effect-romeo:hover h3{-webkit-transform:translate3d(0,-50%,0) translate3d(0,-100%,0);transform:translate3d(0,-50%,0) translate3d(0,-100%,0)}
 
 figure.effect-romeo:hover p{-webkit-transform:translate3d(0,-100%,0) translate3d(0,120%,0);transform:translate3d(0,-100%,0) translate3d(0,120%,0)}

Merci de votre aide, grâce à vous j avance bien!!

Novis