How To Remove Padding From Top Nav

Hi All!

I am struggling to remove some default padding around the top nav. I have tried to 0 out padding and I used the !important but still no change. Here’s my code so far.

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package Nifet Health
 */

 ?>

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ) ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="profile" href="https://gmpg.org/xfn/11" />
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>  
      <header>
          <div class="top-nav">
              <p>Sign in</p>
              <p>Register</p>
          </div>

          <div class="container">
              <div class="row">
                  <div class="col-4">Logo</div>
                  <div class="col-4">Search</div>
                  <div class="col-4">Cart & Account</div>
              </div>
          </div>
      </header>

      <nav class="navbar">
          <?php 

          wp_nav_menu(
              array(
                  'theme_location'    =>   'nifet_health_main_menu'
              )
          );

          ?>
      </nav>

And the css

 /* Styling navbar */
 .top-nav {
	 display: flex;
	 color: #fff;
	 align-items: center;
	 justify-content: flex-end;
	 padding-bottom: 0 !important;
	 padding-top: 0 !important;
 }

 #menu-nifet-health-main-menu a:hover {
	 background: red;
 }

 #menu-nifet-health-main-menu {
	 display: flex;
	 list-style-type: none;
 }

 #menu-nifet-health-main-menu a {
	 color: #fff;
 }

 .navbar {
	 background: #037DA4;
	 padding-bottom: 1rem;
 }

• This topic was modified 6 years, 3 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic