html - Why is my hr tag behaving differently in two places? -

I am using the same class selector, but I do not understand why it behaves differently Has been doing.

This is my website:

In the first example, the margins are fine; In the second case, no.

  & lt ;! - Side navigation __________________________________ - & gt; & Lt; Div class = "side_nav_wrapper" & gt; & Lt; Div class = "side_nav_photos" id = "side_wrapper_text" & gt; Photo & lt; / Div & gt; & Lt; Div class = "side_nav_about" id = "side_wrapper_text" & gt; About & lt; / Div & gt; & Lt; Div class = "side_nav_writing" id = "side_wrapper_text" & gt; Writing & lt; / Div & gt; & Lt; Div class = "side_nav_contact" id = "side_wrapper_text" & gt; Contact & lt; / Div & gt; & Lt; / Div & gt; & Lt ;! - Contents ____________________________________________ - & gt; & Lt; Div class = "content_wrapper" & gt; & Lt ;! - Photo __________________________________________ - & gt; & Lt; Div class = "home_photo" & gt; & Lt; / Div & gt; & Lt; Hour class = "line" & gt; & Lt ;! - ___________________________________________________ - & gt; & Lt; Div class = "home_text" & gt; & Lt; P & gt; Emma Carmichael is a writer and editor based in Brooklyn, NY, though she graduated from Vassar College in 2010 with a degree in Emma Urban Studies, from Brattleboro, VT; The subject of his thesis about women's rappers, etc. & Lt; / P & gt; & Lt; / Div & gt; & Lt; Hour class = "line" & gt;   
 (Besides, I do not understand why this class is not implemented):  
  #side_wrapper_text a: link {font -family: Playfair display ', without serif; Font-size: 20px; Font-weight: 100; Color: RGBA (255,255,255,1); Text-decoration: None; Text align: center; Letter-distance: 0.2em; } & Lt; Div class = "side_nav_wrapper" & gt; & Lt; Div class = "side_nav_photos" id = "side_wrapper_text" & gt; Photo & lt; / Div & gt; & Lt; Div class = "side_nav_about" id = "side_wrapper_text" & gt; About & lt; / Div & gt; & Lt; Div class = "side_nav_writing" id = "side_wrapper_text" & gt; Writing & lt; / Div & gt; & Lt; Div class = "side_nav_contact" id = "side_wrapper_text" & gt; Contact & lt; / Div & gt; & Lt; / Div & gt;   
 thanks !!   
 
 
 your class  home_text  attribute  float: left; , which will flow from the document flow to that  & lt; Div & gt;  takes element if you remove that float feature, you will see that  ; Div & gt;  Recognizes the document flow, and  & lt; Hr & gt;   
 Alternatively, you can clear : both  to fix it like this:  
 In your CSS file:  
 . Explain {Clear: Both; }   
 In your markup:  
  & lt; Div class = 'home_text' & gt; ... & lt; / Div & gt; & Lt; Div class = 'clear' & gt; & Lt; / Div & gt; & Lt; Hr square = 'row' / & gt;