Align navbar-brand with page

Question

I have this page here demoPage I am trying to make my navbar brand reponsive with the page. For now i have added custom padding with navbar-brand but i want it to be responsive with the page if i change the size of my browser. Also i want a little space between my school title and its logo. How can i do that? I have written this page in an angular component

hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.alignLeft {
  float: left;
}

.indented {
  padding-left: 50pt;
  padding-right: 50pt;
}

.col-sm-9 {
  background-color: white;
}

img {
  padding-left: 10px;
  width: 100%;
  height: 100%;
}

h3 {
  text-align: center;
  padding-left: 20px;
}

h4,
p {
  padding-left: 20px;
  padding-right: 20px;
  text-align: justify !important;
}

.para1 {
  text-align: center !important;
}

h4:first-child {
  display: inline;
  margin-left: 20px !important;
}

h4:nth-child(2) {
  text-align: left !important;
}

p:first-child {
  text-align: center !important;
}

p:nth-child(3) {
  text-align: left !important;
  float: left !important;
}

@media (min-width: 480px) {
  img {
    float: left;
    padding-right: 10px;
    padding-bottom: 0px;
  }
  .col-sm-9 {
    padding-bottom: 25px;
  }
  h4,
  p {
    padding-left: 20px;
    padding-right: 20px;
    text-align: justify !important;
  }
  .container-fluid {
    text-align: justify !important;
  }
}

.columns1 {
  align-self: center;
  justify-self: center;
  background-color: white;
  margin-bottom: 0;
}

.center2 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  justify-content: center;
  padding-left: 400px;
  padding-right: 400px;
  margin-bottom: 0;
}

.center {
  margin: 0 auto;
  width: 90%;
  padding-left: 300px;
}

.jumbotron {
  align-items: center;
}

.center1 {
  margin: auto;
  width: 50%;
  padding-left: 140px;
}

.footer-copyright {
  width: 100%;
  background-color: gray;
  padding-right: 70px;
}

.footer {
  font-family: "Roboto", sans-serif;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  border: none;
  background-color: grey;
  bottom: 0;
  position: relative;
  left: 0;
  z-index: 12;
  width: 100%;
  white-space: nowrap;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  float: left;
  height: 50px;
  font-size: 18px;
  margin-top: 100px;
}

.footer a {
  background-color: transparent;
}

a {
  color: white;
  text-align: center;
}

.navbar-brand {
  padding-left: 450px;
}

.navbar {
  font-family: "Roboto", sans-serif;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  border: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 12;
  width: 100%;
}



.navbar .navbar-brand {
  white-space: nowrap;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> HTML Code

<div class="container-fluid">
  <nav class="navbar">
    <a class="navbar-brand" asp-controller="Home" asp-action="Index"><i class="fa 
    fa-cubes"></i> GEP <span class="header-logo-text">Learning Management 
    System</span></a>
  </nav>
  <div class="jumbotron vertical-center">
    <div class="row content">
      <div class="center2">
        <div class="columns1 text-center">
          <img class="img-responsive" src="/assets/images/school.png" alt="Smiley face" style="float:left; border:2px solid gray; border-radius: 50%; display: inline; width:90px; height:80px; margin-top:60px; margin-left: 20px;">
          <h4 align="left" style="margin-top: 90px;">
            School Name/ Title<br><br><br>
          </h4>
          <br>
          <hr>
          <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo </p>
          </div>
          <br>
          <div>
            <img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:right;width:200px;height:200px;">
            <p><span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>Ut enim ad minim
              veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
              quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            </p>
          </div>
          <br>
          <div>
            <img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:left;width:200px;height:200px;">
            <p><span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>Ut enim ad minim
              veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
            </p>
          </div>
          <br>
          <br>
          <div>
            <img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:right;width:200px;height:200px;">
            <p><span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>Ut enim ad minim
              veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
              quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            </p>
          </div>
          <br>
          <hr>
          <div>
            <h3>Address</h3>
            <i class="material-icons" style="color:red;">location_on</i><span id="txt1">Address,County,City,District</span>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <a href="">
        <h3>Gep Learning Management Sytem</h3>
      </a>
    </div>
  </div>
</div>

Answer 1

Here is how i solved this

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.alignLeft {
    float: left;
}

.indented{padding-left: 50pt; padding-right: 50pt;}

.col-sm-9 {
    background-color: white; 
}

img {
    padding-left: 10px;
    width: 100%;
    height: 100%;
}



h3 {
    text-align: center;
    padding-left: 20px;
}

h4, p {
    padding-left: 20px;
    padding-right: 20px;
    text-align: justify !important;
}

.para1 {
    text-align: center !important;
}


h4:first-child {
    display: inline;
    margin-left: 20px !important;
}

h4:nth-child(2) {
    text-align: left !important;
}

p:first-child { 
    text-align: center !important; 
}

p:nth-child(3) {
    text-align: left !important;
    float:  left !important;
}

.center3 {
    margin: auto;
    width: 65%;
    margin-bottom: 0;
}

.columns1 {
    align-self: center;
    justify-content: center;
    background-color: white;
    margin-bottom: 5px;
    padding-bottom: 50px;
  }

  .thumb {
    width: 100px;
    height: 100px;
    display: inline-block;
    border-radius: 50%;
    background-image: url(/assets/images/school.png);
    background-size: cover;
    background-position: center;
    margin-top: 60px;
    margin-left: 20px;
    float: left;
  }
.center2{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-content: center;
    margin: auto;
    width: 65%;
    margin-bottom: 0;
    
}

i.material-icons {
    font-size: 16px;
    vertical-align: middle;
    position: relative;
    font-size: 24px;
}

p {
    font-size: 17px !important;
}

.center2 .footer {
    bottom: 0;
}

.center {
    margin: 0 auto;
    width: 90%;
    padding-left: 300px;
 
}

.jumbotron {
    align-items: center;
    background-color: white; 
    overflow-x: hidden;
}


.navbar {
    align-items: center;
}

.center1 {
    margin: auto;
    width: 50%;
    padding-left: 140px;
}

.footer-copyright {
    width: 100%;
    background-color: gray;
    padding-right: 70px;
}


.footer {
    font-family: "Roboto", sans-serif;
    background-color: grey; 
    bottom: 0;
    margin : auto;
    margin-bottom: 0;
    position: relative;
    z-index: 12;
    font-size: 10px;
    display: grid;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    text-overflow: ellipsis;
}

.footer a {
    background-color: transparent;
}
a {
    color: white;
    text-align: center;
}

.container-fluid {
    background-color: white;
}

@media screen and (max-width: 700px) { 
    .center2 {
        width: 100%;
    }

    .center3 {
        width: 100%;
    }

    .img-responsive {
        width: 100% !important;
    }
}

  <nav class="navbar">
    <div class="center3">
      <a class="navbar-brand mx-auto" asp-controller="Home" asp-action="Index">
        <i class="fa fa-cubes"></i> GEP
        <span class="header-logo-text">Learning Management System</span>
      </a>
    </div>
  </nav>
  <div class="jumbotron vertical-center">
    <div class="row content">
      <div class="center2">
        <div class="columns1 text-center">
 
          <div class="thumb"></div>
          <h4 align="left" style="margin-top: 100px;">
            <span style="margin-left: 20px;">School Name</span>
          </h4>
          <br>
          <br>
          <br>
          <hr>
          <section>
            <div>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                </p>
            </div>
          </section>
          <br>
          <br>
          <section>
            <div>
              <img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:right;width:400px;height:200px;">
              <p>
                <span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
              </p>
            </div>
          </section>
          <br>
          <br>
          <br>
          <br>
          <br>
          <section>
            <div>
              <img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:left;width:400px;height:200px;">
              <p>
                <span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span>
                <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.
              </p>
            </div>
          </section>
          <br>
          <br>
          <br>
          <br>
          <section>
            <div>
              <img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:right;width:400px;height:200px;">
              <p>
                <span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span>
                <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.
              </p>
            </div>
          </section>
          <br>
          <br>
          <br>
          <br>
          <section>
            <div>
              <h3><u>Address</u></h3>
              <i class="material-icons" style="color:red; ">location_on</i>
              <span id="txt1" style="font-size: 15px;">Address,County,City,District</span>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
  <div class="footer">
      <div>
        <a href="">
          <h3>Gep Learning Management System</h3>
        </a>
      </div>
  </div>

Answer 2

On your navbar-brand, add the class of mx-auto

    <a class="navbar-brand mx-auto" asp-controller="Home" asp-action="Index"><i class="fa 
fa-cubes"></i> GEP <span class="header-logo-text">Learning Management 
System</span></a> 

Then, in your css, remove the padding-left that you added to .navbar-brand.

.navbar-brand {
    /*padding-left: 450px;*/
}    

As for the space between the logo and school title, you can add a class of mr-1, mr-2, or mr-3 (or 4, or 5) to the img, depending on how much space you want.

<img class="img-responsive mr-2" src="/assets/images/school.png" alt="Smiley face" style="float:left; border:2px solid gray; border-radius: 50%; display: inline; width:90px; height:80px; margin-top:60px; margin-left: 20px;">

mx-auto centers content.

mr-1 (or 2, 3, etc.) adds margin-right (hence "m" and "r").

Check out the documentation on spacing on Bootstrap 4: https://getbootstrap.com/docs/4.1/utilities/spacing/

I'm assuming you are using Bootstrap 4. :)