styling the footer changes header parent element : <p>I am new to the front end stuff and having a bit of a moment endeavouring to style the footer on my project. </p>

<p>My header and footer are both constructed using a ( UL LI and UL LI a )</p>

<p>Problem: When I try and style the footer using CSS the header is also correspondingly changed with the same styling.</p>

<p>How should I modify the footer in terms of coding so that when I apply styling to it, it does not change the header/parent element.</p>

<p><a href="https://i.stack.imgur.com/cGbXN.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cGbXN.jpg" alt="enter image description here"></a></p>

<blockquote>
  <p>Header</p>
</blockquote>

<pre><code>&lt;nav class="navbar navbar-static-top navbar-default" role="navigation"&gt;
  &lt;div class="container"&gt;
  &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
  &lt;div class="navbar-header"&gt;
    &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"&gt;
      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;a class="navbar-brand" href="/"&gt;
      &lt;img alt="Nippon Beauty" class="navbar-brand-icon" src="assets/nippon.svg"&gt;
    &lt;/a&gt;

  &lt;/div&gt;

  &lt;!--&lt;span style="color: #53100e"&gt;| Japanese and South Korean Luxury Skincare&lt;/span&gt; 

  &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
  &lt;div class="collapse navbar-collapse navbar-ex1-collapse"&gt;
    &lt;ul class="nav navbar-nav navbar-right"&gt;
      &lt;li&gt;&lt;%= link_to "Home", root_path %&gt;&lt;/li&gt;
      &lt;li&gt;&lt;%= link_to "About", about_path %&gt;&lt;/li&gt;
      &lt;li&gt;&lt;%= link_to "Login", new_user_session_path %&gt;&lt;/li&gt; 
      &lt;li&gt;&lt;%= link_to "Signup", new_user_registration_path %&gt;&lt;/li&gt;
      &lt;% if user_signed_in? %&gt;
        &lt;li&gt;&lt;%= link_to "Account Settings", edit_user_registration_path %&gt;&lt;/li&gt;
        &lt;li&gt;&lt;%= link_to "Log out", destroy_user_session_path, method: :delete %&gt;&lt;/li&gt;
      &lt;% else %&gt;
    &lt;% end %&gt;
    &lt;/ul&gt;
  &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
&lt;/nav&gt;
</code></pre>

<blockquote>
  <p>Footer</p>
</blockquote>

<pre><code>&lt;div class="row bottom-footer text-center-mobile"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Returns Policy&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Terms and Conditions&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<blockquote>
  <p>CSS</p>
</blockquote>

<pre><code>@import url(https://fonts.googleapis.com/css?family=Lato:400,700);

$body-bg:                          #ecf0f1;
$font-family-sans-serif:           'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$navbar-height:                    70px;
$navbar-default-bg:                white;
$navbar-default-brand-color:       #c0392b;
$brand-primary:                    #c0392b;
$jumbotron-bg:                     white;

@import 'bootstrap';
@import 'bootstrap-sprockets';

.center {
     text-align: center;
}

.navbar-brand {
     font-weight: bold;
}


.btn-lg {
    padding: 18px 28px;
    font-size: 22px;
    border-radius: 8px;
    }


.jumbotron {
    width: 735px;
    padding-left: 30px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-top: 20px;
}

.container .jumbotron {
    border-radius: 35px;
}


.container {
    width: 1270px;
}


.navbar {
    min-height: 90px;
}

.navbar-brand {
    float: left;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: normal;
}

.navbar-brand img {
  display: inline-block;
}


.navbar-brand span {
    display:inline-block;
    vertical-align : middle;
    height: 7px;
}


h1, {
  font-family: 'Lobster', cursive;
  color: #e22f8f;
}


.row {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}



li {
  display: inline-block;
  *display: inline;
  padding: 4px;
  color: #e22f8f;
  }
</code></pre>
