afwijking in de eerste class met margin-right in css in wordpress?

  • Opgelost johannes999

    (@johannes999)


    7 maanden, 2 weken geleden

    Hallo,

    eerst ik laat zien de code :

    deze is de html code :

    <span style="font-size: 14.4px;"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background-color:#f7f7f7;
            margin: 0;
            padding: 0;
        }      
       
    </style>
</head>
<body>
 <div class="flex-container-macbook-page">
    <div class="section1-macbook-page">
        <div class="left-side-macbook1-page">Some text goes here on the left side.</div>
        <div class="middle-side-macbook1-page">Some text goes here in the middle.</div>
        <div class="right-side-macbook1-page">
<div class="macbook-page-link1"><a href="#">To The Best Offer</a></div>
    </div>  </div>
    <div class="section2-macbook-page">
        <div class="left-side-macbook2-page">Some text goes here on the left side.</div>
        <div class="middle-side-macbook2-page">Some text goes here in the middle.</div>
        <div class="right-side-macbook2-page">
<div class="macbook-page-link2"><a href="#">To The Best Offer</a></div>
</div>  </div>
    <div class="section3-macbook-page">
        <div class="left-side-macbook3-page">Some text goes here on the left side.</div>
        <div class="middle-side-macbook3-page">Some text goes here in the middle.</div>
        <div class="right-side-macbook3-page">
<div class="macbook-page-link3"><a href="#">To The Best Offer</a></div> 
</div>    </div>
</div>

        

</body>
</html>
</span>

    deze is css code :

    .flex-container-macbook-page {
          display:flex;
	  flex-direction:column;
	           width: 80%;
            height: 400px; /* Use 100vh for 100% height of the viewport */
            background: #e0fbfc;
            margin-left: 10%;
            margin-right: 10%;
            margin-top: -12rem;
        }

        .section1-macbook-page {
            display: flex;
			width:100%;
            flex-direction: row;
            margin-bottom: 15px;
            margin-top: 2rem;
		   
        }

        .left-side-macbook1-page {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 33.333%;
			margin-left:4%;
           
        }

        .middle-side-macbook1-page {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 33.333%;
		
        }

        .right-side-macbook1-page {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            width: 33.333%;
          margin-right:4%;
           
        }

 .section2-macbook-page {
            display: flex;
            flex-direction: row;
	          width:100%;
             margin-bottom: 15px;
            margin-top: 2rem;
	      
        }

        .left-side-macbook2-page {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 33.333%;
			margin-left:4%;
           
        }

        .middle-side-macbook2-page {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 33.333%;
        }

        .right-side-macbook2-page {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            width: 33.333%;
			margin-right:4%;
          
           
        }

 .section3-macbook-page {
            display: flex;
            flex-direction: row;
	         width:100%;
            margin-bottom: 15px;
            margin-top: 2rem;
	      
        }

        .left-side-macbook3-page {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 33.333%;
			margin-left:4%;
          
        }

        .middle-side-macbook3-page {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 33.333%;
        }

        .right-side-macbook3-page {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            width: 33.333%;
           margin-right:4%;
           
        }

.macbook-page-link1,
.macbook-page-link2,
.macbook-page-link3 {
    border-radius: 15px;
    text-align: center;
    flex-wrap: nowrap;
    padding: 6px 20px; /* Adjusted padding */
    background: #3498db;
    
}

.macbook-page-link1 a,
.macbook-page-link2 a,
.macbook-page-link3 a {
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
}

.macbook-page-link1:hover,
.macbook-page-link2:hover,
.macbook-page-link3:hover {
    background-color: #1d6ea4;
}

    als u gaat naar macbook pagina u ziet dat eerste class de tekst en de link hebben een afwijking naar links.

    ik heb :

    *{border: 1px solid red!important}

    geprobeerd maar ik kund niet het probleem vinden!

    kan iemand weten waar het probleem ligt en hoe ik kan oplossen?

    probber niet via menu naar deze pagina te gaan alleen via de linken vanaf home pagina. het is nog niet volmaakt.

    dank u wel

    De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • Guido

    (@guido07111975)

    7 maanden, 2 weken geleden

    Hoi,

    als u gaat naar macbook pagina u ziet dat eerste class de tekst en de link hebben een afwijking naar links.

    Om welke link en tekst gaat het, om het menu bovenaan en/of de tekst die eronder staat? (Some text goes here on the left side)

    Guido

    Thread starter johannes999

    (@johannes999)

    7 maanden, 2 weken geleden

    dank u wel,

    ik heb de probleem opgelost .

    ik had in pagina’s deze code :

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background-color:#f7f7f7;
            margin: 0;
            padding: 0;
        }      
       
    </style>
</head>

    wegdoen.

    ik heb het weg gehaald en de probleem is opgelost . ik heb gezien voor aparte styling voor specifieke pagian ik moet specifieke template maken..

    sorry ik moest doorgeven ,maar ik vergat.

    dank u wel

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • Het onderwerp ‘afwijking in de eerste class met margin-right in css in wordpress?’ is gesloten voor nieuwe reacties.

Tags