Как сделать колоны в футере в ряд

Question

header {
    box-shadow: 0 2px 6px rgb(100 95 136 / 15%);
    top:20px;
    width: 100%;
    min-height: 70px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;

}

.header {
    padding: 1.5rem 7rem;
}

.nav-link {
    color:rgba(100, 95, 136, 0.75);
    margin: 15px;
    text-decoration: none;

   
}

.menu-header {
    font-size: 1rem;
    font-weight: 400;
    padding: 0.2rem 0.2rem;
    margin: 0 8px;
    

}

footer {
    box-shadow: 0 2px 6px rgb(100 95 136 / 15%);
    font-size: 1.25rem;
    font-family: "Work Sans", sans-serif;
    width: 100%;
    padding-top: 80px;
    padding-bottom: 16px;
    position: relative;
    display: block;
}

nav {
    margin-left: 242px;
    font-size: 1.25rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    font-family: "Work Sans", sans-serif;
}

#quote {
    margin-left: 399px;
    border-radius: 50em;
    border-color: #D7D5E9;
    padding: 8px 24px;
    border: 1px solid #D7D5E9;
}

html {
    font-family: "maincons";
}

.logo-header {
    color: #6C55F9;
}

.digi-header {
    color: rgba(0, 0, 0, 0.9);
}

.home-header {
    color: #6C55F9;
}

.logo-footer {
    color: #6C55F9;
    font-weight: 600;
    font-size: 1.75rem;
    margin-bottom: 24px;
}

.digi-footer {
    color: #645F88;
    font-weight: 600;
    margin-bottom: 24px;
    font-size: 1.75rem;
}

.mail {
    color: #6C55F9;
    margin-bottom: 24px;
}

.numb-manager {
    color: #6C55F9;
    margin-bottom: 24px;
}


.heading {
    color: #645F88;
    font-weight: 600;
    margin-bottom: 24px;
}

.first-column {
    width: 250px;
    padding-left: 0;
    margin-left: 0;
}

.first-column a {
    text-decoration: none;
    color: #6C55F9;
}

.second-column a {
    text-decoration: none;
    font-family: "Work Sans", sans-serif;
    color: #898798;
    margin-bottom: 24px;
}

.second-column {
    padding-right: 15px;
    padding-left: 15px;
    margin: 1rem;
    min-width: 160px;
    
}

.footer-menu-links{
    position: relative;
    padding-left: 0;
    list-style: none;
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 400;
    color: #898798;
    font-family: "Work Sans", sans-serif;
    list-style: none;
}

footer nav {
    padding-left: 24px;
}

footer nav ul {
    padding: 0;
}

footer nav li {
    list-style: none;
    padding: 0;
  }

<body>
    <header>
        <nav class="header">
            <a href="index1.html" class="nav-link digi-header">Digi<span class="logo-header">Gram.</span></a>
            <a href="index1.html" class="nav-link home-header menu-header">Home</a>
            <a href="index1.html" class="nav-link menu-header">About</a>
            <a href="index1.html" class="nav-link menu-header">Services</a>
            <a href="index1.html" class="nav-link menu-header">News</a>
            <a href="index1.html" class="nav-link menu-header">Contact</a>
            <a href="index1.html" class="nav-link menu-header" id="quote">Get a Quote</a>
        </nav>
    </header>

    <main>
        <div class="img">
            <!--<img src="file:///C:/Users/User/Desktop/projects/pop/digigram/assets/img/bg_image_1.png" alt>-->

        </div>
    </main>


    <footer>
        <nav class="footer">   
            
            
            <div class="first-column">
                <div class="digi-footer">Digi<span class="logo-footer">Gram. </span></div>
                <div>
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                </div>
                <p>
                    <a href="#" class="mail ">
                        [email protected]
                    </a>
                </p>
                <p>
                    <a href="#" class="numb-manager ">
                        +00 1122 3344 5566
                    </a>
                </p>
            </div>
            
            
            <div class="second-column">
                <div class="heading">
                    Quick Links
                </div>
                <ul class="footer-menu-links">
                    <li>
                        <a href="#">How it works</a>
                    </li>
                    <li>
                        <a href="#">Security</a>
                    </li>
                    <li>
                        <a href="#">Pricing</a>
                    </li>
                    <li>
                        <a href="#">Resources</a>
                    </li>
                    <li>
                        <a href="#">  Report a Bug</a>
                    </li>
            </div>
        </nav>
    </footer>
    <script src="code1.js"></script>
</body>

Answer 1

Нужно в тег nav добавить это: display: flex;

header {
    box-shadow: 0 2px 6px rgb(100 95 136 / 15%);
    top:20px;
    width: 100%;
    min-height: 70px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
}

.header {
    padding: 1.5rem 7rem;
}

.nav-link {
    color:rgba(100, 95, 136, 0.75);
    margin: 15px;
    text-decoration: none;

   
}

.menu-header {
    font-size: 1rem;
    font-weight: 400;
    padding: 0.2rem 0.2rem;
    margin: 0 8px;
    

}

footer {
    box-shadow: 0 2px 6px rgb(100 95 136 / 15%);
    font-size: 1.25rem;
    font-family: "Work Sans", sans-serif;
    width: 100%;
    padding-top: 80px;
    padding-bottom: 16px;
    position: relative;

}

nav {
    margin-left: 242px;
    font-size: 1.25rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    font-family: "Work Sans", sans-serif;
    display: flex;
    
}


#quote {
    margin-left: 399px;
    border-radius: 50em;
    border-color: #D7D5E9;
    padding: 8px 24px;
    border: 1px solid #D7D5E9;
}

html {
    font-family: "maincons";
}

.logo-header {
    color: #6C55F9;
}

.digi-header {
    color: rgba(0, 0, 0, 0.9);
}

.home-header {
    color: #6C55F9;
}

.logo-footer {
    color: #6C55F9;
    font-weight: 600;
    font-size: 1.75rem;
    margin-bottom: 24px;
}

.digi-footer {
    color: #645F88;
    font-weight: 600;
    margin-bottom: 24px;
    font-size: 1.75rem;
}

.mail {
    color: #6C55F9;
    margin-bottom: 24px;
}

.numb-manager {
    color: #6C55F9;
    margin-bottom: 24px;
}


.heading {
    color: #645F88;
    font-weight: 600;
    margin-bottom: 24px;
}

.first-column {
    width: 250px;
    padding-left: 0;
    margin-left: 0;
}

.first-column a {
    text-decoration: none;
    color: #6C55F9;
}

.second-column a {
    text-decoration: none;
    font-family: "Work Sans", sans-serif;
    color: #898798;
    margin-bottom: 24px;
}

.second-column {
    padding-right: 15px;
    padding-left: 15px;
    margin: 1rem;
    min-width: 160px;
    
}

.footer-menu-links{
    position: relative;
    padding-left: 0;
    list-style: none;
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 400;
    color: #898798;
    font-family: "Work Sans", sans-serif;
    list-style: none;
}

footer nav {
    padding-left: 24px;
}

footer nav ul {
    padding: 0;
}

footer nav li {
    list-style: none;
    padding: 0;
  }

<body>
    <header>
        <nav class="header">
            <a href="index1.html" class="nav-link digi-header">Digi<span class="logo-header">Gram.</span></a>
            <a href="index1.html" class="nav-link home-header menu-header">Home</a>
            <a href="index1.html" class="nav-link menu-header">About</a>
            <a href="index1.html" class="nav-link menu-header">Services</a>
            <a href="index1.html" class="nav-link menu-header">News</a>
            <a href="index1.html" class="nav-link menu-header">Contact</a>
            <a href="index1.html" class="nav-link menu-header" id="quote">Get a Quote</a>
        </nav>
    </header>

    <main>
        <div class="img">
            <!--<img src="file:///C:/Users/User/Desktop/projects/pop/digigram/assets/img/bg_image_1.png" alt>-->

        </div>
    </main>


    <footer>
        <nav class="footer">   
            
            
            <div class="first-column">
                <div class="digi-footer">Digi<span class="logo-footer">Gram. </span></div>
                <div>
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                </div>
                <p>
                    <a href="#" class="mail ">
                        [email protected]
                    </a>
                </p>
                <p>
                    <a href="#" class="numb-manager ">
                        +00 1122 3344 5566
                    </a>
                </p>
            </div>
            
            
            <div class="second-column">
                <div class="heading">
                    Quick Links
                </div>
                <ul class="footer-menu-links">
                    <li>
                        <a href="#">How it works</a>
                    </li>
                    <li>
                        <a href="#">Security</a>
                    </li>
                    <li>
                        <a href="#">Pricing</a>
                    </li>
                    <li>
                        <a href="#">Resources</a>
                    </li>
                    <li>
                        <a href="#">  Report a Bug</a>
                    </li>
                  </ul>
            </div>
        </nav>
    </footer>
    <script src="code1.js"></script>
</body>

Answer 2

Исправил отступы и удалил некоторые ненужные стили закрыл тэг ul

body{
  margin: 0 auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
header {
  box-shadow: 0 2px 6px rgb(100 95 136 / 15%);
  width: 100%;
}

.header {}

.digi-header {
  color: rgba(0, 0, 0, 0.9);
}

nav {
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 600;
  font-family: "Work Sans", sans-serif;
  display: flex;
  padding: 0 1%;
}

.nav-link {
  color: rgba(100, 95, 136, 0.75);
  text-decoration: none;
  margin-right: 5px;
}

.nav-link:last-child {
  margin-right: 0px;
}

.menu-header {
  font-size: 1rem;
  font-weight: 400;
  align-self: center;
}

footer {
  box-shadow: 0 2px 6px rgb(100 95 136 / 15%);
  font-size: 1.25rem;
  font-family: "Work Sans", sans-serif;
  width: 100%;
  padding-top: 80px;
  position: relative;
}

#quote {
  border-radius: 50em;
  border-color: #D7D5E9;
  border: 1px solid #D7D5E9;
  padding: 8px 24px;
}

html {
  font-family: "maincons";
}

.logo-header {
  color: #6C55F9;
}

.home-header {
  color: #6C55F9;
}

.logo-footer {
  color: #6C55F9;
  font-weight: 600;
  font-size: 1.75rem;
  margin-bottom: 24px;
}

.digi-footer {
  color: #645F88;
  font-weight: 600;
  margin-bottom: 24px;
  font-size: 1.75rem;
}
main{
    padding-top: 20px
}
.mail {
  color: #6C55F9;
  margin-bottom: 24px;
}

.numb-manager {
  color: #6C55F9;
  margin-bottom: 24px;
}

.heading {
  color: #645F88;
  font-weight: 600;
  margin-bottom: 24px;
}

.first-column {
  padding: 10px;
}

.first-column {
  padding: 10px;
  text-decoration: none;
  color: #6C55F9;
}

.second-column a {
  text-decoration: none;
  font-family: "Work Sans", sans-serif;
  color: #898798;
  margin-bottom: 24px;
}

.second-column {
  padding-right: 15px;
  padding-left: 15px;
  min-width: 160px;
}

.footer-menu-links {
  position: relative;
  font-size: 1rem;
  font-weight: 400;
  color: #898798;
  font-family: "Work Sans", sans-serif;
}

footer nav {}

footer nav ul {
  padding: 0;
}

footer nav li {
  list-style: none;
  padding: 0;
}
.img{
  text-align: center;
}

<body>
  <header>
    <nav class="header">
      <a href="index1.html" class="nav-link digi-header">Digi<span class="logo-header">Gram.</span></a>
      <a href="index1.html" class="nav-link home-header menu-header">Home</a>
      <a href="index1.html" class="nav-link menu-header">About</a>
      <a href="index1.html" class="nav-link menu-header">Services</a>
      <a href="index1.html" class="nav-link menu-header">News</a>
      <a href="index1.html" class="nav-link menu-header">Contact</a>
      <a href="index1.html" class="nav-link menu-header" id="quote">Get a Quote</a>
    </nav>
  </header>

  <main>
    <div class="img">
      <img src="https://apkshki.com/storage/4577/icon_5f1867bb453b1_4577_w256.png" >

    </div>
  </main>


  <footer>
    <nav class="footer">


      <div class="first-column">
        <div class="digi-footer">Digi<span class="logo-footer">Gram. </span></div>
        <div>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit.
        </div>
        <p>
          <a href="#" class="mail ">
                        [email protected]
                    </a>
        </p>
        <p>
          <a href="#" class="numb-manager ">
                        +00 1122 3344 5566
                    </a>
        </p>
      </div>
      
      <div class="first-column">
        <div class="digi-footer">Что<span class="logo-footer">-то </span></div>
        <div>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit.
        </div>
        <p>
          <a href="#" class="mail ">
                        [email protected]
                    </a>
        </p>
        <p>
          <a href="#" class="numb-manager ">
                        +00 1122 3344 5566
                    </a>
        </p>
      </div>


      <div class="second-column">
        <div class="heading">
          Quick Links
        </div>
        <ul class="footer-menu-links">
          <li>
            <a href="#">How it works</a>
          </li>
          <li>
            <a href="#">Security</a>
          </li>
          <li>
            <a href="#">Pricing</a>
          </li>
          <li>
            <a href="#">Resources</a>
          </li>
          <li>
            <a href="#">  Report a Bug</a>
          </li>
      </div>
    </nav>
  </footer>
  <script src="code1.js"></script>
</body>

БЛОГ НА HUSL

Как сделать колоны в футере в ряд

Ответы (2 шт):